I'm trying to embed tinyMCE to my project and having this issue from browser console while initializing TinyMCE.
GET https://cdn.tiny.cloud/1/vy3lklpfrj9a8l0jkefxe602pse728rb6ku0bqjf3i2cmqak/tinymce/5.10.3-128/themes/silver/theme.min.js net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
and this
GET https://sp.tinymce.com/i?aid=vy3lklpfrj9a8l0jkefxe602pse728rb6ku0bqjf3i2cmqak&tna=tinymce_cloud&p=web&dtm=1646981257782&stm=1646981257782&tz=Asia%2FSeoul&e=se&se_ca=script_load net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep
I used script tag to add the TinyMCE...
with those errors, Nothing shows on the screen where textarea should be.
When I make an HTML file and open it with the browser, it has no problem.....
I'm trying this on localhost and I have localhost on approved domains list of TinyMCE's dashboard.
here's my code.
first, here's my entire EJS file
postWrite.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.nav-pills > .nav-item > .active {
color : white;
background-color : black;
}
</style>
<script src="https://cdn.tiny.cloud/1/(MY-API-KEY)/tinymce/5/tinymce.min.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
</head>
<body>
<header class="container">
<div class="d-flex flex-fill py-3 mb-4 border-bottom p-3">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none text-body">
<span class="fs-4 ms-3">HKJang's Blog</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="/" class="nav-link text-body" >About Me</a></li>
<li class="nav-item"><a href="project" class="nav-link active">Projects</a></li>
<li class="nav-item"><a href="index_admin" class="nav-link text-body" aria-current="page">Modify Index</a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-2">
<input type="search" class="form-control form-control-dark ms-3" placeholder="Search..." aria-label="Search">
</form>
<form>
<button class="btn btn-dark my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</header>
<main class="container">
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</main>
<footer class="container">
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script>
</script>
</body>
</html>
and the part that I'm having trouble on is
...
<script src="https://cdn.tiny.cloud/1/(MY-API-KEY)/tinymce/5/tinymce.min.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#mytextarea'
});
</script>
...
...
<main class="container">
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</main>
...
this EJS file is rendered by controller.
projectController.js
const boardView = async(req, res) => {
res.render("boardView", {});
};
const postView = async(req, res) => {
res.render("postView", {});
};
const postWriteView = (req, res) => {
res.render("postWrite", {});
}
module.exports = {
boardView,
postView,
postWriteView
};
and finally, this is index.js file for my server
index.js
const express = require('express');
const app = express();
var bodyparser = require('body-parser');
const helmet = require('helmet');
const compression = require('compression');
const csp = require('helmet-csp');
const cors = require('cors');
app.use(bodyparser.json());
app.use(bodyparser.urlencoded({extended: true})); // bodyparser : post 방식 body parsing용 -> express 기본 탑재
app.use(express.json());
var corsOption = {
origin: 'localhost',
credentials:'true'
}
app.use(cors(corsOption));
app.use(helmet());
app.use(
csp({
directives: {
defaultSrc: ["'self'"],
styleSrc: ["'self' 'sha256-uts7zrnGYAKZNfvBc7PYcShvKP4t10vo5qemd5Yp0lc=' https://cdn.jsdelivr.net/"],
scriptSrc: ["'self' 'unsafe-inline' https://cdn.jsdelivr.net/ https://cdn.tiny.cloud/1/vy3lklpfrj9a8l0jkefxe602pse728rb6ku0bqjf3i2cmqak/tinymce/5/tinymce.min.js"],
imgSrc: ["'self' https://blogprojectbucket.s3.amazonaws.com/ https://blogprojectbucket.s3.ap-northeast-2.amazonaws.com"]
},
})
);
app.use(compression());
app.set('view engine', 'ejs');
//Routes
app.use('/', require('./routes/board'));
app.use('/api', require('./routes/api'));
app.use('/project', require('./routes/project'))
const PORT = process.env.PORT || 3000;
app.listen(PORT, console.log("Server start at port : "+PORT));
Btw, I've tried to open all CORS configuration by trying app.use(cors())
Please help!
