[content-security-policy] Chrome 28의 base64 이미지에 콘텐츠 보안 정책 ‘데이터’가 작동하지 않음 28

Program / 글쓴이

이 간단한 예에서는 메타 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 에서이 예제를 열 수도 있습니다.

답변

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

img-src 'self' data:;

답변

이 시도

로드 할 데이터 : 

<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=

답변