Chrome 28의 base64 이미지에 콘텐츠 보안 정책 '데이터'가 작동하지 않음 28

247

이 간단한 예에서는 메타 http-equiv 헤더를 사용하여 CSP 헤더를 설정하려고합니다. base64 이미지를 포함했으며 Chrome에서 이미지를로드하려고합니다.

data키워드가 그렇게해야 한다고 생각 했지만 어떻게 든 작동하지 않습니다.

개발자 도구에서 다음과 같은 오류가 발생합니다.

이미지 'data : image / png; base64, R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75 + euIiPFBP + hVVf3v7… nw7yk4Mjr6GLUY + joiBI2QAACABwJDCHgoKOHEoAYVBAgY8BGMAQACBGQAQAQAQACBAGAQAQAQAQABAGACBAGAQAQAQAQABGB

예제 코드 (JSFiddle은 메타 헤더를 설정할 수 없기 때문에이 예제에서는 작동하지 않습니다) :

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="
        default-src 'none';
        style-src 'self' 'unsafe-inline';
        img-src 'self' data;
        " />
    <style>
        #helloCSP {
            width: 50px;
            height: 50px;
            background: url(data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7+iHh/JNTfh9dNUYGPjTvskXFfOLi/daVe96es4eHPWIiOqbi9dNRvzWwexdV9U1NeFSS94iIvuxodVGP/ZsZM8jI+ibm/alluQzMdxSSvbGstwsKu2Yid4iIfjQu/JnYO6djvajlMQEBPvLuOJdXeMxL/3jzPBSTdwqKNY2Mf3i4vU5OfbPz/3f3/zUv/zizO0tLc0NDfMzM+UlJekpKeEhId0dHdUVFdkZGdEREf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1>CSP</h1>
    <div id="helloCSP"></div>
</body>
</html>

https://dl.dropboxusercontent.com/u/638360/ps/csp.html 에서이 예제를 열 수도 있습니다.

content-security-policy

— fwebdev
소스

답변:

468

CSP 스펙의 문법에 따르면 , 스킴을 scheme:뿐만 아니라 로 지정해야합니다 scheme. 따라서 이미지 소스 지시문을 다음과 같이 변경해야합니다.

img-src 'self' data:;

— 격통
소스

이러한 어색한 이유는 '데이터'체계와 '데이터'라는 호스트를 구분하기가 어렵 기 때문입니다.

— Mike West

URL은 일반적으로 구문 분석하기가 다소 어색하다고 생각합니다.

나는 내 데이터를 인용했다- 'data :'-그것은 또한 작동하지 않는다-그리고 당신의 대답은 또한 문제로서 그것을 나에게 경고했다

— kris

보안 관련 사항을 고려하지 않고 추가하면 안된다는 점에 유의하는 것이 좋습니다. 참고 이 보안 스택 교환 질문

— Matthijs Wessels가

보안 스캐너는 데이터를 찾습니다 : 안전하지 않은 요소

— Sajithd

이 시도

로드 할 데이터 :

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>

utf8을 base64 변환기로 가져 와서 "svg"문자열을 다음으로 변환하십시오.

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

CSP는

img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

— 제임스
소스

프로토콜 뒤에 유형을 포함시킬 수 있다고 생각하지 않습니다. "data :"만 유효합니다.

— rameezk