인디노트

JavaScript 로 iframe 안에서 Clipboard 데이터를 읽어오기~ 헛수고 하지 말자 본문

개발 플랫폼 및 언어/JavaScript

JavaScript 로 iframe 안에서 Clipboard 데이터를 읽어오기~ 헛수고 하지 말자

인디개발자 2022. 9. 22. 14:39

자바스크립트에서 클립보드의 데이터를 읽어오는것은 보안상 매우 어려운 상황이다.

여러가지를 해 보았지만 마지막으로 postMessage 를 이용해서 parent 에게 시켜도 보았지만

결론은 localhost 로 호출하지 않고 도메인(예; www.parent.com) 호출하면 클립보드 데이터를 가져올 수 없다는 결론이다.   

parent.html

<!DOCTYPE html>
<html>
<head>
<script>
function onClickPaste() {
	console.log("onClickPaste");

	navigator.clipboard
		.readText()
		.then(
			cliptext => console.log("cliptext:" + cliptext),
			err => console.log(err)
		);			
}

window.addEventListener('message', function(e) {
	if (e && e.data && e.origin=="http://www.child.com" && e.isTrusted==true) {
		var json = JSON.parse(JSON.stringify(e.data));
		if (json.cmd=="cliptext") {
			navigator.clipboard
			.readText()
			.then(
				cliptext => {
					json["cliptext"] = cliptext;
					document.getElementById('child').contentWindow.postMessage(JSON.stringify(json), '*');
				},
				err => console.log(err)
			);			
		}
	}
});

</script>
</head>	
<body>

<h1>My Parent Heading</h1>
<p>My parent paragraph.</p>
<iframe id="child" src="http://www.child.com/child.html"></iframe>
<input type="button" value="paste" onclick="onClickPaste()">
</body>
</html>

 

child.html

<!DOCTYPE html>
<head>
<script>
window.addEventListener('message', function(e) {
	if (e && e.data && e.origin=="http://www.parent.com") {
		console.log(e.data);
	}
});
function onClickPaste() {
	window.parent.postMessage({ cmd: 'cliptext' }, '*');
}
</script>
</head>
<html>
<body>

<h1>Child</h1>
<input type="button" value="paste" onclick="onClickPaste()">
</body>
</html>

 

개발 컴퓨터에 httpd 를 가동시키고 parent.html 을 http://localhost/parent.html 로 접속해서 하면 문제 없이 동작할 있다.

하지만, 개발 컴퓨터에 www.parent.com 이라는 도메인을 부여하고 http://www.parent.com/parent.html 로 접속하면 클립보드 데이터를 읽어오는데 에러가 발생한다.  

내가 생각해도 이것은 보안상 문제가 되는 항목이므로 어쩔 수 없는것 같다.

이렇게 기록하는것은 향후에 괜히 헛수고 하지 않기 위해서 이다. 

반응형
저작자표시

'개발 플랫폼 및 언어 > JavaScript' 카테고리의 다른 글

gsap JS 파일 있는곳 (또한, 다양한 JS Plugins)  (0) 2023.10.03
JSOTP Github 및 NPM 등록  (0) 2022.12.02
JavaScript 모듈에 대한 내용  (0) 2021.03.11
How do I include a JavaScript file in another JavaScript file?  (0) 2021.02.07
ES5 , ES6  (0) 2021.02.07
'개발 플랫폼 및 언어/JavaScript' Related Articles more
Comments