Задать вопрос
@samael228

Как удалить Content-Security-Policy?

Суть вопроса заключается в том, что я заключил пари со своим другом о том, что смогу загрузить iframe, даже если установлен Content-Security-Policy (его можно изменить через script но не изменять через блокнот). Я написал код, который просто удаляет его. Однако он по-прежнему блокирует запрос. Почему это происходит и как это можно решить?
Консоль:Refused to frame 'https://game-analytics.ru/' because it violates the following Content Security Policy directive: "child-src 'self' *.allwebgames.com *.playhop.com *.yandex.az *.yandex.by". Note that 'frame-src' was not explicitly set, so 'child-src' is used as a fallback.
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content=" child-src 'self' *.allwebgames.com *.playhop.com *.yandex.az *.yandex.by">
    <title>Создание Iframe через JavaScript</title>
</head>
<body>
<div id="iframe-container">
    <!-- Iframe будет добавлен сюда -->
</div>
<script>
     const metaTag = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
     if (metaTag) {
       metaTag.parentNode.removeChild(metaTag);
      }
      document.addEventListener('DOMContentLoaded', function() {
        const iframe = document.createElement('iframe');
        iframe.setAttribute('src', 'https://game-analytics.ru/');
        document.getElementById('iframe-container').appendChild(iframe);    
    });
</script>
</body>
</html>
  • Вопрос задан
  • 132 просмотра
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 1
grantur5707
@grantur5707
Full Stack Web Developer
Наверное, одним из универсальных вариантов будет использование прокси-сервера, который вам поможет обойти заголовки CSP путем маршрутизации запросов через сервер, где эти заголовки могут быть изменены.

На node.js он разворачивается довольно просто:

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});

http.createServer(function(req, res) {
    proxy.web(req, res, {
        target: 'https://game-analytics.ru',
        changeOrigin: true,
        selfHandleResponse: true
    });

    proxy.on('proxyRes', function(proxyRes, req, res) {
        let body = [];

        proxyRes.on('data', function(chunk) {
            body.push(chunk);
        });

        proxyRes.on('end', function() {
            body = Buffer.concat(body);
            res.setHeader('Content-Security-Policy', '');
            res.writeHead(proxyRes.statusCode, proxyRes.headers);
            res.end(body);
        });
    });

}).listen(3000, () => {
    console.log('Прокси-сервер запущен на порту 3000');
});


В вашем коде используйте прокси-адрес при создании iframe окна:

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Создание Iframe через JavaScript</title>
</head>
<body>
<div id="iframe-container"></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const iframe = document.createElement('iframe');
        iframe.setAttribute('src', 'http://localhost:3000');
        document.getElementById('iframe-container').appendChild(iframe);    
    });
</script>
</body>
</html>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы