title: How to upload image in ckeditor using Angularjs and NodeJs
body: <p>After some research I am able to send the data to Server and get response however, on response I am getting error</p>
  
  <pre><code>Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match.
  </code></pre>
  
  <p>and</p>
  
  <pre><code>Uncaught DOMException: Blocked a frame with origin "http://localhost:3001" from accessing a cross-origin frame.
  </code></pre>
  
  <p>How to implement this check in angularjs part in ckeditor to get the url and set the url in the </p>
  
  <p><strong>AngularJs : localhost:3001</strong></p>
  
  <p>index.html</p>
  
  <pre><code>&lt;script&gt;
          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;
  
              // ...
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>tmpl.html</p>
  
  <pre><code>&lt;div id="a" ckeditor="vm.options" ng-model="vm.textInput" ready="vm.onReady()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>where API_ENDPOINT = localhost:3010
  vm.options = {
              language: 'en',
              allowedContent: true,
              entities: false,
              filebrowserImageUploadUrl : API_ENDPOINT.url+'/ckeditor/pictures' 
          };
          vm.onReady = function () {
              // ...
          };
  </code></pre>
  
  <p><strong>server side : localhost:3010</strong> </p>
  
  <p>editor.js following the route <code>/ckeditor/pictures</code></p>
  
  <pre><code>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 = "&lt;script type='text/javascript'&gt;window.parent.CKEDITOR.tools.callFunction(1,path,\"File uploaded\");&lt;/script&gt;"
  res.writeHeader(200, {"Content-Type": "text/html", });
  html = "";
  html += "&lt;script type=\"text/javascript\"&gt;";
  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 += "&lt;/script&gt;";
  console.log(html);
  res.write(html);
  res.end();
  
  });
  
  module.exports = router;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>Sources Followed: </p>
  
  <ul>
  <li><a href="https://alfrednutile.info/posts/50" rel="nofollow noreferrer">https://alfrednutile.info/posts/50</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage</a></li>
  <li><a href="https://github.com/lemonde/angular-ckeditor" rel="nofollow noreferrer">https://github.com/lemonde/angular-ckeditor</a></li>
  <li><a href="https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame">SecurityError: Blocked a frame with origin from accessing a cross-origin frame</a></li>
  </ul>
  
  <p>Screenshots in sequence of event:</p>
  
  <p><a href="https://i.stack.imgur.com/KY1qV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KY1qV.png" alt="On Uploading the image form local"></a></p>
  
  <p>On choosing the image upload tab in ckeditor and selecting the image from local</p>
  
  <p><a href="https://i.stack.imgur.com/Rbj5W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rbj5W.png" alt="enter image description here"></a></p>
  
  <p>After clicking send to server get the response from server and no error till yet</p>
  
  <p><a href="https://i.stack.imgur.com/grSUx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/grSUx.png" alt="enter image description here"></a></p>
  
  <p>On clicking the image info as given in ckeditor it should show image url in the text box,</p>
  
  <p><a href="https://i.stack.imgur.com/OwSlx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OwSlx.png" alt="enter image description here"></a></p>
  
  <p>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</p>
  
  <pre><code>Blocked a frame with origin "http://localhost:3001" from accessing a frame with origin "http://localhost:3010". Protocols, domains, and ports must match
  </code></pre>
  
  <p>Also its not allowing me to close the popup</p>