Blocked a frame of origin "null" from accessing a cross-origin frame - chrome

Asked
Active3 hr before
Viewed126 times

7 Answers

crossblockedoriginframe
90%

4 Didn't work for me when i tried after hosting in my local machine.. Got this error: blocked a frame of origin “http://127.0.0.1:8080” from accessing a cross-origin frame - chrome – rehman_00001 Apr 4 '19 at 6:49 ,This happens because Chrome doesn't allow frames from your hard disk to access each others' content. Which, technically we term as Cross-origin request. ,If you don't want to use a local web server as suggested in the accepted answer you can run the browser with cross domain web security / same origin policy disabled.,I'm new to Javascript and am learning the basics via a textbook that focuses on its applications in IE 7+ and Firefox 2+. However, I am using Chrome and am getting the following error when running the program given in the book: "blocked a frame of origin 'null' from accessing a cross-origin frame." Can anyone tell me what is causing the error and how I can fix it? The two programs are below.

I'm new to Javascript and am learning the basics via a textbook that focuses on its applications in IE 7+ and Firefox 2+. However, I am using Chrome and am getting the following error when running the program given in the book: "blocked a frame of origin 'null' from accessing a cross-origin frame." Can anyone tell me what is causing the error and how I can fix it? The two programs are below.

//This is the program being loaded into the browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>

<script type="text/javascript">

function calcFactorial(factorialNumber){
    var factorialResult = 1;
    for(;factorialNumber>0;factorialNumber--) factorialResult *= factorialNumber;
    return factorialResult;
}

</script>

</head>

<frameset cols="100%,*">
<frame name="fraCalcFactorial" src="calcfactorial.htm"/>
</frameset>

</html>
load more v
88%

How To Solve blocked a frame of origin “null” from accessing a cross-origin frame – chrome Error ?,How blocked a frame of origin “null” from accessing a cross-origin frame – chrome Error Occurs?, Today I get the following error blocked a frame of origin “null” from accessing a cross-origin frame – chrome in javascript. , To Solve blocked a frame of origin “null” from accessing a cross-origin frame – chrome Error If you use Visual Studio Code, you can install an extension named “Live Server”. It helped me when I had the same problem.

If you don’t want to use a local web server as suggested in the accepted answer you can run the browser with cross domain web security / same origin policy disabled.

cross domain web security
load more v
72%

Tool Environment: Layui framework uses VS Code for Chrome debugging.,SecurityError: Blocked a frame with origin from accessing a cross-origin frame,Cross-domain issues Blocked a frame with origin "http://......" from accessing a cross-origin frame.,iframe frame adaptive height uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

 1 "version": "0.2.0",
    2 "configurations": [
       3 {
          4 "Name": "Use this machine chrome debug",
             5 "type": "chrome",
             6 "request": "launch",
             7 "file": "${workspaceRoot}/index.html",
             8 //"URL": "http://mysite.com/index.html", // When using an external server, comment File, change the URL, and set the usebuildinserver to false "http://mysite.com/index .html
          9 "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", //  Change into your chrome installation path
             10 "sourceMaps": false,
             11 "webRoot": "${workspaceRoot}",
             12 //  "preLaunchTask":"build",
          13 "userDataDir": "${tmpdir}",
             14 "port": 5433
          15, "runtimeArgs": [
             16 " --disable-web-security" //Cross-domain access, unsafe, only local test
             17
          ]
          18
       }
       19
    ]
65%

Tool environment: use vs code to debug chrome in layui framework,Problem Description: when Chrome browser calls other pages with iframe page, it will prompt: “uncaught domexception: blocked a frame with origin” null “from accessing a cross origin frame”,Iframe Cross-port Blocked a frame with origin from accessing a cross-origin frame,[Chrome Error] Cross origin requests are only supported for protocol schemes: http, data,chrome-extension

The complete configuration file is as follows:

1 "version": "0.2.0",
   2 "configurations": [
      3 {
         4 "name": "Debugging with native Chrome",
            5 "type": "chrome",
            6 "request": "launch",
            7 "file": "${workspaceRoot}/index.html",
            8 //"url": "http://mysite.com/index.html", //When using an external server, please comment out the file, use the url instead, and set useBuildInServer to false "http://mysite.com/index.html
         9 "runtimeExecutable": "C:\\Program Files (x86)\Google\\Chrome\\Application\\chrome.exe", // change it to your Chrome installation path
            10 "sourceMaps": false,
            11 "webRoot": "${workspaceRoot}",
            12 //  "preLaunchTask":"build",
         13 "userDataDir": "${tmpdir}",
            14 "port": 5433
         15, "runtimeArgs": [
            16 " --disable-web-security" //Cross-domain access, insecure, local testing only
            17
         ]
         18
      }
      19
   ]
75%

//Open the HTML file using live server, it will work
40%

Anything embedded by <iframe>. Sites can use the X-Frame-Options header to prevent cross-origin framing.,Cross-origin script API access,Cross-origin network access,Cross-origin data storage access

document.domain = "company.com";
22%

Uncaught DOMException: Blocked a frame with origin "http://example.com" from accessing a cross-origin frame. at HTMLIFrameElement.iFrame.onload (file:///C:/Users/vroy1/Documents/Programming/web-extension-summarizer/src/inject-content/inject.js:58:56),Before someone marks this post as a duplicate of another post, such as this: SecurityError: Blocked a frame with origin from accessing a cross-origin frame this post is different because it is about avoiding this error in the context of a Chrome web extension, which means there may be unique solutions.,Here is the manifest.json,Here is the code for the popup that the extension displays when its toolbar icon is clicked:

Here is the shortened (to avoid making the post excessively long) code that injects the iFrame. This code is within a content script in the user's current tab:

var iFrame = document.createElement("iFrame");
iFrame.id = "contentFrame";
iFrame.classList.add("cleanslate");
iFrame.style.cssText = "width: 100% !important; height: 100% !important; border: none !important;";
iFrame.src = browser.extension.getURL("inject-content/inject.html");
document.body.appendChild(iFrame);

Here is the manifest.json

{
   "manifest_version": 2,
   "name": "TL;DR - Summarizer",
   "version": "3.0",

   "description": "Summarizes webpages",

   "permissions": [
      "activeTab",
      "tabs",
      "*://*.smmry.com/*"
   ],

   "icons": {
      "48": "icons/border-48.png"
   },

   "browser_action": {
      "browser_style": true,
      "default_popup": "popup/choose_length_page.html",
      "default_icon": {
         "16": "icons/summarizer-icon-16.png",
         "32": "icons/summarizer-icon-32.png"
      }
   },

   "web_accessible_resources": [
      "inject-content/inject.html",
      "inject-content/cleanslate.css"
   ],

   "content_security_policy": "script-src 'self' 'sha256-AeZmmPP/9ueCrodQPplotiV3Pw0YW4QqifjUL7NE248='; object-src 'self'"

}

After injecting the iFrame, I set the "click" listeners for the buttons within the iFrame, once the iFrame has loaded. I do this using the following code sample. However, while the following code works in Firefox Quantum, it throws an exception in Chrome.

iFrame.onload = () => {

   //The error occurs on the following line.

   var closeButton = iFrame.contentWindow.document.getElementById("close-btn");

   closeButton.addEventListener("click", () => {
      //Do Stuff
   });

   var copyButton = iFrame.contentWindow.document.getElementById("copy-btn");

   copyButton.addEventListener("click", () => {
      //Do stuff
   });

}

Here is the code for the popup that the extension displays when its toolbar icon is clicked:

//Enable the polyfill for the content script and execute it in the current tab

browser.tabs.executeScript({
   file: "/polyfills/browser-polyfill.js"
}).then(loadContentScript).catch((error) => logError(error));

function loadContentScript() {
   browser.tabs.executeScript({
      file: "/inject-content/inject.js"
   }).then(listenForClicks).catch((error) => logError(error));
}

function listenForClicks() {
   document.addEventListener('click', e => {
      if (!e.target.classList.contains('btn')) {
         return;
      } else {
         browser.tabs.query({
               active: true,
               currentWindow: true
            })
            .then(tabs => {
               browser.tabs.sendMessage(tabs[0].id, {
                  summaryLength: e.target.id,
                  targetURL: tabs[0].url
               });
            });
      }
   });
}

function logError(error) {
   console.log(error);
}
load more v

Other "cross-blocked" queries related to "Blocked a frame of origin "null" from accessing a cross-origin frame - chrome"