Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 380

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 366

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 364

Disabling same-origin policy in your browser

<iframe>

browsers block scripts trying to access a frame with a different origin

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html

Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

if you own both the pages, you can work around this problem using window.postMessage and its relative message event

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');
  • In your <iframe> (contained in the main page): window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

This method can be applied in both directions, creating a listener in the main page too, and receiving responses from the frame. The same logic can also be implemented in pop-ups and basically any new window generated by the main page (e.g. using window.open()) as well, without any difference.

There already are some good answers about this topic (I just found them googling), so, for the browsers where this is possible, I'll link the relative answer. However, please remember that disabling the same-origin policy (or the CORS) will only affect your browser. Also, running a browser with same-origin security settings disabled grants any website access to cross-origin resources, so it's very unsafe and should be done for development purposes only.

  • Apple Safari: not possible, only CORS.
  • Microsoft Edge: not possible.
  • Microsoft Internet Explorer: not possible, only CORS.
Access-Control-Allow-Origin
canvas.drawImage
postMessage

First time I've seen the tilde "~" operator in javascript. For anyone else who also didn't know what it does: it converts -1 to 0, which saves you having to do "!= -1" on the result of the indexOf. Personally, I think I'll carry on using "!= -1" as it's easier for other programmers to understand and avoids the bugs that would come from forgetting to put the tilde in. (But it's always nice to learn something new.)

@SabaAhang just check for the iframe.src, and if the site it's different from your domain's hostname then you can't access that frame.

@Snuggs totally wrong, ~ returns the 2's complement of the number, so n becomes -n-1, meaning that only -1 will become 0 (which is interpreted as false), and any other value will pass the test. I.E. 0 = -(-1)-1, not -(-1+1).

javascript - SecurityError: Blocked a frame with origin from accessing...

javascript jquery iframe same-origin-policy
Rectangle 27 19

Do it in the browser, too !

EDIT: this didn't really fit into the flow of my previous answer. I'm leaving it here as a second answer for people that might be looking to do this in the browser.

You can do this client side in modern browsers, if you'd like

// str byteToHex(uint8 byte)
//   converts a single byte to a hex string 
function byteToHex(byte) {
  return ('0' + byte.toString(16)).slice(-2);
}

// str generateId(int len);
//   len - must be an even number (default: 40)
function generateId(len) {
  var arr = new Uint8Array((len || 40) / 2);
  window.crypto.getRandomValues(arr);
  return [].map.call(arr, byteToHex).join("");
}
generateId();
// "1e6ef8d5c851a3b5c5ad78f96dd086e4a77da800"

generateId(20);
// "d2180620d8f781178840"
Browser    Minimum Version
--------------------------
Chrome     11.0
Firefox    21.0
IE         11.0
Opera      15.0
Safari     5.1

Number.toString(radix) doesn't always guarantee a 2 digit value (ex: (5).toString(16) = "5", not "05"). This doesn't matter unless you are depending on your final output to be exactly len characters long. In this case you can use return ('0'+n.toString(16)).slice(-2); inside of your map function.

javascript - How to generate random SHA1 hash to use as ID in node.js?...

javascript node.js random sha1 entropy
Rectangle 27 788

The default behavior of the browser is equivalent to:

The default behavior of the browser is equivalent to:

table {border-collapse: collapse;}
td    {padding: 0px;}

Sets the amount of space between the contents of the cell and the cell wall

Sets the amount of space between the contents of the cell and the cell wall

table {border-collapse: collapse;}
td    {padding: 6px;}
table {border-collapse: collapse;}
td    {padding: 6px;}

Controls the space between table cells

Controls the space between table cells

table {border-spacing: 2px;}
td    {padding: 0px;}
table {border-spacing: 2px;}
td    {padding: 6px;}
table {border-spacing: 2px;}
td    {padding: 6px;}
table {border-spacing: 8px 2px;}
td    {padding: 6px;}
table {border-spacing: 8px 2px;}
td    {padding: 6px;}
border-spacing
border-spacing
border-collapse
border-collapse
separate
separate

Here you can find the old html way of achieving this.

Here you can find the old html way of achieving this.

How is the spacing around the table disappearing? When I set "border-spacing: 8px 12px, it adds the spacing not just between, but between the table border and the outside cells! But that is not depicted in the images here; they are flush left.

An excellent pictorial representation and jsfiddle example.

what about putting the css values in a text format for easy copy & past

@2astalavista And unfortunately if someone wants the effect of the exterior spacing deleted, it won't work this way with these CSS attributes.

@Kaz You might need use negative margin to hide that annoying part.

How is the spacing around the table disappearing? When I set "border-spacing: 8px 12px, it adds the spacing not just between, but between the table border and the outside cells! But that is not depicted in the images here; they are flush left.

The default padding on TD is typically 1px, not 0

@2astalavista And unfortunately if someone wants the effect of the exterior spacing deleted, it won't work this way with these CSS attributes.

@vapcguy to apply it to a table that has id t1 use #t1 and #t1 td instead of table and td

html - Set cellpadding and cellspacing in CSS? - Stack Overflow

html css alignment html-table stylesheet
Rectangle 27 18

Do it in the browser, too !

EDIT: this didn't really fit into the flow of my previous answer. I'm leaving it here as a second answer for people that might be looking to do this in the browser.

You can do this client side in modern browsers, if you'd like

// str byteToHex(uint8 byte)
//   converts a single byte to a hex string 
function byteToHex(byte) {
  return ('0' + byte.toString(16)).slice(-2);
}

// str generateId(int len);
//   len - must be an even number (default: 40)
function generateId(len) {
  var arr = new Uint8Array((len || 40) / 2);
  window.crypto.getRandomValues(arr);
  return [].map.call(arr, byteToHex).join("");
}
generateId();
// "1e6ef8d5c851a3b5c5ad78f96dd086e4a77da800"

generateId(20);
// "d2180620d8f781178840"
Browser    Minimum Version
--------------------------
Chrome     11.0
Firefox    21.0
IE         11.0
Opera      15.0
Safari     5.1

Number.toString(radix) doesn't always guarantee a 2 digit value (ex: (5).toString(16) = "5", not "05"). This doesn't matter unless you are depending on your final output to be exactly len characters long. In this case you can use return ('0'+n.toString(16)).slice(-2); inside of your map function.

javascript - How to generate random SHA1 hash to use as ID in node.js?...

javascript node.js random sha1 entropy
Rectangle 27 18

Do it in the browser, too !

EDIT: this didn't really fit into the flow of my previous answer. I'm leaving it here as a second answer for people that might be looking to do this in the browser.

You can do this client side in modern browsers, if you'd like

// str byteToHex(uint8 byte)
//   converts a single byte to a hex string 
function byteToHex(byte) {
  return ('0' + byte.toString(16)).slice(-2);
}

// str generateId(int len);
//   len - must be an even number (default: 40)
function generateId(len) {
  var arr = new Uint8Array((len || 40) / 2);
  window.crypto.getRandomValues(arr);
  return [].map.call(arr, byteToHex).join("");
}
generateId();
// "1e6ef8d5c851a3b5c5ad78f96dd086e4a77da800"

generateId(20);
// "d2180620d8f781178840"
Browser    Minimum Version
--------------------------
Chrome     11.0
Firefox    21.0
IE         11.0
Opera      15.0
Safari     5.1

Number.toString(radix) doesn't always guarantee a 2 digit value (ex: (5).toString(16) = "5", not "05"). This doesn't matter unless you are depending on your final output to be exactly len characters long. In this case you can use return ('0'+n.toString(16)).slice(-2); inside of your map function.

javascript - How to generate random SHA1 hash to use as ID in node.js?...

javascript node.js random sha1 entropy
Rectangle 27 18

Do it in the browser, too !

EDIT: this didn't really fit into the flow of my previous answer. I'm leaving it here as a second answer for people that might be looking to do this in the browser.

You can do this client side in modern browsers, if you'd like

// str byteToHex(uint8 byte)
//   converts a single byte to a hex string 
function byteToHex(byte) {
  return ('0' + byte.toString(16)).slice(-2);
}

// str generateId(int len);
//   len - must be an even number (default: 40)
function generateId(len) {
  var arr = new Uint8Array((len || 40) / 2);
  window.crypto.getRandomValues(arr);
  return [].map.call(arr, byteToHex).join("");
}
generateId();
// "1e6ef8d5c851a3b5c5ad78f96dd086e4a77da800"

generateId(20);
// "d2180620d8f781178840"
Browser    Minimum Version
--------------------------
Chrome     11.0
Firefox    21.0
IE         11.0
Opera      15.0
Safari     5.1

Number.toString(radix) doesn't always guarantee a 2 digit value (ex: (5).toString(16) = "5", not "05"). This doesn't matter unless you are depending on your final output to be exactly len characters long. In this case you can use return ('0'+n.toString(16)).slice(-2); inside of your map function.

javascript - How to generate random SHA1 hash to use as ID in node.js?...

javascript node.js random sha1 entropy
Rectangle 27 785

The default behavior of the browser is equivalent to:

Sets the amount of space between the contents of the cell and the cell wall

table {border-collapse: collapse;}
td    {padding: 6px;}

Controls the space between table cells

table {border-spacing: 2px;}
td    {padding: 6px;}
table {border-spacing: 8px 2px;}
td    {padding: 6px;}
border-spacing
border-collapse
separate

Here you can find the old html way of achieving this.

How is the spacing around the table disappearing? When I set "border-spacing: 8px 12px, it adds the spacing not just between, but between the table border and the outside cells! But that is not depicted in the images here; they are flush left.

@2astalavista And unfortunately if someone wants the effect of the exterior spacing deleted, it won't work this way with these CSS attributes.

@Kaz You might need use negative margin to hide that annoying part.

The default padding on TD is typically 1px, not 0

html - Set cellpadding and cellspacing in CSS? - Stack Overflow

html css alignment html-table stylesheet
Rectangle 27 2096

How can this be used to make a divider fill the height of the browser?

There are a couple of relatively new CSS3 measurement units called:

From the linked W3 Candidate Recommendation above:

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

<div></div>
div {
    height:100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying Fiddle to easily see the difference!

Very sad making that I cannot seem to use this in combination with calc(). Like if my element has borders, height: calc(100vh - 2px);

Strange behavior with scrolling when the element is actually taller than the viewport. The container maintains the viewport height and the content flows out of the container. min-height:100vh seems to work around this.

@DGDD this works on iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 and IEMobile 10.0. I don't know which mobile browser you're refering to, but those 4 make up over 90% of mobile browsers used. This question doesn't specify a requirement for working on mobile browsers.

@robross0606 again that is not the question I've answered here. That's a different question altogether, whose answer does indeed use flexbox: stackoverflow.com/questions/90178/

html - Make div 100% height of browser window - Stack Overflow

html css height
Rectangle 27 2096

How can this be used to make a divider fill the height of the browser?

There are a couple of relatively new CSS3 measurement units called:

There are a couple of relatively new CSS3 measurement units called:

From the linked W3 Candidate Recommendation above:

From the linked W3 Candidate Recommendation above:

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

<div></div>
<div></div>
div {
    height:100vh;
}
div {
    height:100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

This is literally all that's needed. Here is a JSFiddle example of this in use.

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

This is currently supported on all up-to-date major browsers apart from Opera Mini and Android Browser. Check out Can I use... for further support.

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>
<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying Fiddle to easily see the difference!

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying Fiddle to easily see the difference!

Very sad making that I cannot seem to use this in combination with calc(). Like if my element has borders, height: calc(100vh - 2px);

1vmin assumes a value of the smallest between 1vh and 1vw.1vmax assumes a value of the largest between 1vh and 1vw.

font-size

Strange behavior with scrolling when the element is actually taller than the viewport. The container maintains the viewport height and the content flows out of the container. min-height:100vh seems to work around this.

@DGDD this works on iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 and IEMobile 10.0. I don't know which mobile browser you're refering to, but those 4 make up over 90% of mobile browsers used. This question doesn't specify a requirement for working on mobile browsers.

*Note that these CSS3 units work dynamically in Firefox, but other browsers require refreshing the page.

@Langdon if your element has borders you can make use of the box-sizing property. Setting box-sizing:border-box; effectively places your borders inside the content area. This even works on IE8! :-) Do note though that Firefox currently only supports the -moz prefixed version (-moz-box-sizing).

@robross0606 again that is not the question I've answered here. That's a different question altogether, whose answer does indeed use flexbox: stackoverflow.com/questions/90178/

Amazing.... I was looking a kind of this one

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

html - Make div 100% height of browser window - Stack Overflow

html css height
Rectangle 27 2091

How can this be used to make a divider fill the height of the browser?

There are a couple of relatively new CSS3 measurement units called:

From the linked W3 Candidate Recommendation above:

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

<div></div>
div {
    height:100vh;
}

This is literally all that's needed. Here is a JSFiddle example of this in use.

This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.

In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh and vw.

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height. Take a look at this accompanying Fiddle to easily see the difference!

Very sad making that I cannot seem to use this in combination with calc(). Like if my element has borders, height: calc(100vh - 2px);

Strange behavior with scrolling when the element is actually taller than the viewport. The container maintains the viewport height and the content flows out of the container. min-height:100vh seems to work around this.

@DGDD this works on iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 and IEMobile 10.0. I don't know which mobile browser you're refering to, but those 4 make up over 90% of mobile browsers used. This question doesn't specify a requirement for working on mobile browsers.

@robross0606 again that is not the question I've answered here. That's a different question altogether, whose answer does indeed use flexbox: stackoverflow.com/questions/90178/

html - Make div 100% height of browser window - Stack Overflow

html css height
Rectangle 27 16

HTML/JavaScript, 10855.83 (~5, based on the browser)

Firefox 43.0.1 gave me a slightly higher score than Chrome 49.0.2623.13 dev-m due to their differences in anti-aliasing.

You have to right-click > Save Image As to save the canvas data as an image, but that's the only interaction that's required.

I used Inkscape to sample some colors and GIMP to find the coordinates of certain pixels.

<canvas width="386" height="320" id="c">
<script>
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
context.fillStyle="#2c3e84";
context.fillRect(0,0,386,320);

context.fillStyle="#517a9c";
context.fillRect(0,80,386,150);

context.fillStyle="#1d201d";
context.beginPath();
context.moveTo(33, 319);
context.lineTo(63, 26);
context.lineTo(97, 200);
context.lineTo(179, 319);
context.closePath();
context.fill();

context.fillStyle="#acae6e";
context.beginPath();
context.arc(355,52,35,0,6.3);
context.fill();

context.beginPath();
context.moveTo(0,0);
context.lineTo(300,150);
</script>

If you used a single letter instead of "context" and removed unnecessary whitespace you might have room to add additional detail to the image.

code-challenge graphical-output compression