After some research I am able to send the data to Server and get response however, on response I am getting error
Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match.
and
Uncaught DOMException: Blocked a frame with origin "http://localhost:3001" from accessing a cross-origin frame.
How to implement this check in angularjs part in ckeditor to get the url and set the url in the
AngularJs : localhost:3001
index.html
<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
if (origin !== "http://localhost:3010" || origin !== "http://example.com")
return;
// ...
}
</script>
tmpl.html
<div id="a" ckeditor="vm.options" ng-model="vm.textInput" ready="vm.onReady()"></div>
controller.js
where API_ENDPOINT = localhost:3010
vm.options = {
language: 'en',
allowedContent: true,
entities: false,
filebrowserImageUploadUrl : API_ENDPOINT.url+'/ckeditor/pictures'
};
vm.onReady = function () {
// ...
};
server side : localhost:3010
editor.js following the route /ckeditor/pictures
var express = require('express');
var router = express.Router();
router.post('/', function (req, res, next) {
console.log("got it");
var path = "http://mytestplan.com/img/256/pdb.png";
var data = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(1,path,\"File uploaded\");</script>"
res.writeHeader(200, {"Content-Type": "text/html", });
html = "";
html += "<script type=\"text/javascript\">";
html += " var funcNum = 1;";
html += " var url = \"" + path + "\";";
html += " var message = \"Uploaded file successfully\";";
html += "";
html += " window.parent.CKEDITOR.tools.callFunction(funcNum, url, message);";
html += "</script>";
console.log(html);
res.write(html);
res.end();
});
module.exports = router;
app.js
var allowCrossDomain = function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
next();
};
app.use(allowCrossDomain);
Sources Followed:
- https://alfrednutile.info/posts/50
- https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
- https://github.com/lemonde/angular-ckeditor
- SecurityError: Blocked a frame with origin from accessing a cross-origin frame
Screenshots in sequence of event:
On choosing the image upload tab in ckeditor and selecting the image from local
After clicking send to server get the response from server and no error till yet
On clicking the image info as given in ckeditor it should show image url in the text box,
When I again click the upload tab , the server response is in iframe with the script tag send from server and I then get the below error
Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match
Also its not allowing me to close the popup
