๊ธฐ์กด์ iframe์ ์ฐ๋ ๋ถ๋ถ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
์ฐพ์๋ณด๋ Chrome ์ ์ฑ ๋ณ๊ฒฝ์ ์ํ ๊ฒ์ด์๋๋ฐ, ๊ทธ ํด๊ฒฐ ๋ฐฉ์์ ์ ๋ฆฌํด๋ณด๊ณ ์ ํ๋ค.
๐ ๋ฌธ์ ์ํฉ
Uncaught DOMException : Blocked a frame with origin "๋๋ฉ์ธ" from accessing a cross-origin
iframe์ ๋ก๋ํ๋๋ฐ์๋ ๋ฌธ์ ๊ฐ ์์์ง๋ง
iframe๊ณผ ๋ถ๋ชจ์ฐฝ๊ฐ์ ํต์ ์ด ์์ ๊ฒฝ์ฐ๋ง๋ค ๊ณ์ ์์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
์ฐ๋ฆฌ ์๋น์ค์ ๊ฒฝ์ฐ document.domain ์ค์ ์ ํตํด ๋ถ๋ชจ์ฐฝ๊ณผ ์์์ฐฝ(๋ค๋ฅธ ๋๋ฉ์ธ)๊ฐ์ ํต์ ์ ๊ตฌํํ๋๋ฐ,
์ด์ ๊ด๋ จํ์ฌ Chrome ์ ์ฑ ๋ณ๊ฒฝ์ด ์์๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ๊ฒ์ด์๋ค.
2023๋ 8์ ๊ธฐ์ค ํ ์คํธ ๊ฒฐ๊ณผ, ๊ฐ์ ํฌ๋กฌ ๋ฒ์ ์ด๋๋ผ๋
๊ฐ ์ฌ์ฉ์์ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ก์ปฌ๊ณผ ์๋ฒ์์ ๋ ๋ค ์ ์ ์๋ํ๊ฑฐ๋,
๋ก์ปฌ์์๋ง ์ ์ ์๋, ๋๋ ๋ก์ปฌ๊ณผ ์๋ฒ์์ ๋ชจ๋ ์๋๋์ง ์๋ ๋ฑ
์ผ๋ถ ํ๊ฒฝ์์๋ง document.domain์ด ์ ์์ ์ผ๋ก ๋์ํ๋ค.
๐ ํฌ๋กฌ ๊ฐ๋ฐ์ ๋ธ๋ก๊ทธ
22๋ 11์, 23๋ 5์์ ๊ฒ์๋ ํฌ๋กฌ ๊ฐ๋ฐ์ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ๊ณ ํ๋ค.
โช๏ธ 2022๋ 11์
https://developer.chrome.com/blog/immutable-document-domain/
Chrome will disable modifying `document.domain` to relax the same-origin policy - Chrome for Developers
If your website relies on setting `document.domain`, your action is required.
developer.chrome.com
โช๏ธ 2023๋ 5์
https://developer.chrome.com/blog/document-domain-setter-deprecation/#origin-agent-cluster
Chrome disables modifying `document.domain` - Chrome for Developers
If your website relies on setting document.domain, your action is required.
developer.chrome.com
์ ๋ธ๋ก๊ทธ์ ๋ด์ฉ์ ์์ฝํ๋ฉด,
๊ธฐ์กด์๋ ๋ถ๋ชจ์ฐฝ๊ณผ ์์์ฐฝ(iframe)์ด ์๋ก ๋ค๋ฅธ ๋๋ฉ์ธ์ ๊ฐ์ง ๋
document.domain ์ค์ ์ ์ด์ฉํ๋ฉด ํต์ ์ด ๊ฐ๋ฅํ๋ค.
๊ทธ๋ฌ๋ ์ด์ ๋ถํฐ ์ ๊ธฐ๋ document.domain์ ๋ณด์ ๊ด๋ จ ์ฐ๋ ค๋ฅผ ๋ฐ์ํ์ฌ
Chrome์์๋ ์ ์ฑ ์ผ๋ก ๊ธ์งํ๋๋ก ํ ๊ฒ์ด๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ์ ๋ํ ๋์์ผ๋ก, PostMessage๋ฅผ ํ์ฉํ ๊ฒ์ ๊ถ์ฅํ๊ณ ์๋ค.
๐ PostMessage ํ์ฉ ์์
์ฐ๋ฆฌ ์๋น์ค์์๋ ๋ถ๋ชจ์ฐฝ์์ ํน์ ํ ๋์์ด ์์ ๋,
์์์ฐฝ์์ ๊ทธ์ ๋์ํ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์๋๋๋ก ํ๋ ๊ธฐ๋ฅ์ด ์๋ค.
์๋ฅผ ๋ค์ด ๋ถ๋ชจ์ฐฝ์์ A๋ผ๋ ๋์์ด ๋ฐ์ํ๋ฉด ์์์ฐฝ์ A`๋ผ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ณ ,
๋ถ๋ชจ์ฐฝ์์ B๋ผ๋ ๋์์ด ๋ฐ์ํ๋ฉด ์์์ฐฝ์ B`๋ผ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋๋ก ํ๋ ๊ฒ์ด๋ค.
๊ธฐ์กด์๋ document.domain์ ์ด์ฉํ๊ธฐ ๋๋ฌธ์
์์์ฐฝ์์ ๋ฐ์๋์ด์ผ ํ๋ ์ด๋ฒคํธ์ ๋ํ ๋ก์ง๊น์ง๋ ๋ชจ๋ ๋ถ๋ชจ์ฐฝ์ ํด๋นํ๋ ์ฝ๋์ ์์ฑ๋์ด์์๋ค.
์ด๋ฌํ ๋ก์ง์ PostMessage๋ฅผ ํ์ฉํ๋ ๋ก์ง์ผ๋ก ๋ณ๊ฒฝํ๊ธฐ ์ํด
1๏ธโฃ ๋ถ๋ชจ์ฐฝ์์ ํน์ ์ด๋ฒคํธ(A or B) ๋ฐ์
2๏ธโฃ ์์์ฐฝ์ผ๋ก ํด๋น ์ด๋ฒคํธ๊ฐ A์ธ์ง B์ธ์ง ๊ตฌ๋ถํ ์ ์๋๋ก ๊ทธ ํ์์ ํจ๊ป, ํ์ํ ๋ฐ์ดํฐ ์ ์ก
3๏ธโฃ ์์์ฐฝ์์ PostMessage๋ฅผ ์์ ํ๋ฉด A์ธ์ง B์ธ์ง ์ด๋ฒคํธ๋ฅผ ํ์ธ
4๏ธโฃ ํ์ธ๋ ์ด๋ฒคํธ์ ํด๋นํ๋ ๋ก์ง ์ํ
์์ ๊ฐ์ ์์ผ๋ก ์๋กญ๊ฒ ์ฝ๋๋ฅผ ๊ตฌ์ฑํ๋ค.
(์์์ฐฝ ๋ก์ง์ด ์ค์ํ๊ณ ์ ์ฒด ๊ธฐ๋ฅ ๋์์ ๊ผญ ํ์ํ ๋ถ๋ถ์ผ ๊ฒฝ์ฐ, ๋ง์ง๋ง 5๋ฒ์ ์ถ๊ฐํ์ฌ
์์์ฐฝ ๋ก์ง ์ํ ์๋ฃ ์ ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋์๋ค๋ ๋ฉ์์ง๋ฅผ ๋ถ๋ชจ์ฐฝ์ผ๋ก ๋ณด๋ด๊ณ ,
๋ถ๋ชจ์ฐฝ์์ ํด๋น ๋ฉ์์ง๋ฅผ ๋ฐ์์ ๋ ๋ค์ ๋ก์ง์ด ์ํ๋ ์ ์๋๋ก ํ๋ ๊ฒ๋ ์ข์ ๊ฒ ๊ฐ๋ค.)
์ ๋ฐฉ์์ ์์ฝ๋ ์ฝ๋๋ก ๋ณด๊ฒ ๋ค.
1๏ธโฃ, 2๏ธโฃ ๋ถ๋ชจ์ฐฝ์์ ํน์ ์ด๋ฒคํธ ๋ฐ์ ์ ์์ ์ฐฝ์ผ๋ก ๋ฐ์ดํฐ ์ ์ก
var iframe = document.getElementById( 'iframe' ); // iframe
// A or B ๋์ ๋ฐ์ ์ ํธ์ถ
// eventType : A ๋์ ์ 'A', B ๋์ ์ 'B'
// sendData : ์ด ๋ฉ์์ง๋ฅผ ๋ฐ์์ ๋ ์์์ฐฝ์์ ์ํํด์ผ ํ ๋ก์ง์์ ํ์ํ ๋ฐ์ดํฐ
function sendMsgToChild(eventType, sendData) {
iframe.contentWindow.postMessage({'eventType':eventType, 'sendData':sendDate}, "๋๋ฉ์ธ");
}
- PostMessage๋ JSON์ด๋ String ๋ฑ ๋ค์ํ ํ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์กํ ์ ์๋ค.
- ๋๋ ๋ค์ํ ์ด๋ฒคํธ๋ฅผ ๋ฐ์์์ผ์ผ ํ์ผ๋ฏ๋ก JSON์ผ๋ก ๊ตฌ์ฑํ ๋ค eventType์ด๋ผ๋ ํค ๊ฐ์ผ๋ก ๊ตฌ๋ถํ๋ ์์ผ๋ก ์์ฑํ๋ค.
- ๊ทธ๋ฆฌ๊ณ sendData๋ผ๋ ํ๋ผ๋ฏธํฐ๋ก๋ ํ์ํ ๋ฐ์ดํฐ๋ค์ JSON ๊ฐ์ฒด๋ก ๋ฌถ์ด์ ํ ๋ฒ์ ๋ฃ์ด์ฃผ์๋ค.
- ๊ทธ๋ฆฌ๊ณ postMessage์ ๋ ๋ฒ์งธ ์ธ์๋ก๋ ์์์ฐฝ์ ๋๋ฉ์ธ์ ๋ฃ์ด์ฃผ์ด์ผ ํ๋๋ฐ, ๋๋ https๋ถํฐ ์ ์ฒด๋ฅผ ๋ฃ์๋ค.
(๋ก์ปฌ์ผ ๊ฒฝ์ฐ ํฌํธ๋ฒํธ๊น์ง ๋ชจ๋ ์์ฑํ๋ค.)
3๏ธโฃ, 4๏ธโฃ ์์์ฐฝ์์ PostMessage ์์ ์ ๊ทธ์ ํด๋นํ๋ ๋ก์ง ์ํ
window.addEventListener('message', function(e) {
if(e.data.eventType === 'A') {
// ์ด๋ฒคํธ ์ํ ๋ก์ง
console.log('e.data.eventType');
console.log('e.data.sendData');
} else if(e.data.eventType === 'B') {
// ์ด๋ฒคํธ ์ํ ๋ก์ง
console.log('e.data.eventType');
console.log('e.data.sendData');
}
});
- ์์ ํ ๋ฉ์์ง์ eventType์ ํ์ธํ ๋ค ๊ทธ์ ๋ง๋ ๋ก์ง์ ์ํํ ์ ์๊ฒ ํ๋ค.
- console.log๋ฅผ ์์ฑํ๋ฉด ๊ทธ ๋ก๊ทธ๋ ๋ถ๋ชจ์ฐฝ์์ ํ์ธํ ์ ์๋ค.
๋๋ ์์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์ฝ๋๋ฅผ ๊ตฌ์ฑํ๊ณ ,
์ธ์๋ ์์์์ ๋ถ๋ชจ๋ก ๋ฉ์์ง ์ ์ก์ ์ํ ๋ ๋ํ ๋์ผํ ๋ฐฉ์์ผ๋ก ์์ฑํ๋ฉด ๋๋ค.
๐ ๊ฒฐ๋ก
- Chrome ์ ์ฑ ๋ณ๊ฒฝ์ผ๋ก ์ธํด ์๋ก ๋ค๋ฅธ ๋๋ฉ์ธ ๊ฐ์ document.domain ์ค์ ์ ํตํ ํต์ ์ด ๋ถ๊ฐํจ
- ์๋ก ๋ค๋ฅธ ๋๋ฉ์ธ์ ํต์ ์ํด PostMessage๋ฅผ ํ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํจ
'1๏ธโฃ Web > ๊ธฐํ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Web] ElasticSearch nori & Bulk API ํ์ฉ (0) | 2023.04.02 |
---|---|
[Web] ElasticSearch ์ ์ฉ ๋ฐฉ์ ํ์ (0) | 2023.04.02 |
[Web] Anchor (a ํ๊ทธ) (0) | 2022.09.18 |
[Web] input ํ๊ทธ์ id์ name ์ฐจ์ด์ (0) | 2022.09.18 |
[Web] Form Tag์ ์ด๋ฒคํธ, ์ด๋ฒคํธ ํธ๋ค๋ฌ (2) | 2022.09.18 |
๋๊ธ