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

Question

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>

Below is the src file

<!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 butCalculate_onclick(){
    try{
        if (window.top.calcFactorial == null)
            throw "This page is not loaded within the correct frameset";
        if (document.form1.txtNum1.value == "")
            throw "!Please enter a value before you calculate its factorial";
        if (isNaN(document.form1.txtNum1.value))
            throw "!Please enter a valid number";
        if (document.form1.txtNum1.value < 0)
            throw "!Please enter a positive number";
    }
    catch(exception){
        if (typeof(exception) == "string"){
            if (exception.charAt(0) == "!"){
                alert(exception.substr(1));
                document.form1.txtNum1.focus();
                document.form1.txtNum1.select();
            }
            else alert(exception);
        }
        else alert("The following error occurred: " + exception.message);
    }
}
</script>
</head>
<body>
<form action="" name="form1">
    <input type="text" name="txtNum1" size="3" /> factorial is
    <input type="text" name="txtResult" size="25" /><br/>
    <input type="button" value="Calculate Factorial"
        name="butCalculate" onclick="butCalculate_onclick()" />
</form>
</body>
</html>

Are you running this from a local machine, or hosted on a web server? — CodingIntrigue, May 01 '15 at 08:36
By default Chrome will not allow frames loaded from your local hard disk to access each other's content. If the frames were on the same web server, they could. Chrome has a command line argument that will temporarily suspend this security check. — jfriend00, May 01 '15 at 08:37

score 41 · Accepted Answer · edited May 23 '17 at 11:46

41

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.

Solution of the above problem is:

1. Either you host your webpage on a local web server. See the following link:
What is a faster alternative to Python's http.server (or SimpleHTTPServer)?

2. Use any other browser like Firefox

edited May 23 '17 at 11:46

Community

1
1

answered May 01 '15 at 09:27

amulya349

1,154
1
14
23

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 04 '19 at 06:49
4

`Firefox 75.0` seems to be having the same problem – Alex Pandrea May 07 '20 at 07:27
neither worked for me as well even after running from a local server – arunwebber Jan 07 '21 at 15:17
@arunwebber Did you try in firefox? Chrome blocks it even with local server – amulya349 Jan 09 '21 at 20:17
@amulya349 Yes No luck :( – arunwebber Jan 11 '21 at 10:25
It is not the correct answer :D – TaouBen Feb 18 '21 at 15:01
1

@TaouBen it may not be the correct answer now. It was answered and correct 6 years ago. If you have an updated answer, you can add it in this post so that the current members will gain from it. Thanks – amulya349 Feb 19 '21 at 01:57
@amulya349 : not the correct answer anymore – TaouBen Feb 20 '21 at 16:37

score 3 · Answer 2 · answered May 07 '20 at 07:39

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.

For Chrome:

Disable same origin policy in Chrome

For Firefox:

Disable cross domain web security in Firefox

https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/

Disable firefox same origin policy