Lista de leitura (conteúdo)
Páginas anti-aninhadas
Por exemplo, o clickhackin G mais famoso é usar iframe para interceptar o evento de clique. Como o iframe tem a prioridade mais alta de clique, quando alguém clica na página inicial falsa, se o clique estiver no iframe, o padrão é operar a página do iframe. Portanto, os sites de phishing usam essa tecnologia para induzir os usuários a clicar, por exemplo, criar uma página da web como "minha irmã está solitária" para induzir os usuários a clicar, mas o resultado real é que o que você vê não é "irmã", mas é O Weibo malicioso atrai fãs.
Portanto, para evitar que o site seja phishing, você pode usar window.top para impedir que sua página da web seja iframed.
//iframe2.html
if(window != window.top){
window.top.location.href = correctURL;
}O principal objetivo deste código é restringir a sua página da web não pode ser aninhada em qualquer página da web. Se quiser se referir ao mesmo quadro de domínio, você pode julgar o nome de domínio.
if (top.location.host != window.location.host) {
top.location.href = window.location.href;
}Obviamente, se suas páginas da web tiverem nomes de domínio diferentes, o código acima relatará um erro.
Então, aqui você pode usar try ... catch ... para captura de erro. Se ocorrer um erro, significa um domínio diferente, o que significa que sua página foi roubada. Alguns navegadores podem não relatar erros ao escrever dessa forma, então eles precisam ser rebaixados.
Neste momento, basta pular novamente.
try{
top.location.hostname; //检测是否出错
//如果没有出错，则降级处理
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
}
catch(e){
top.location.href = window.location.href;
}
Este é apenas o lado do navegador, que define as permissões da página iframe. Também podemos definir a permissão para usar iframe no servidor.
Opções de X-Frame
X-Frame-Options é um cabeçalho correspondente, que descreve principalmente as permissões de iframe dos recursos da web do servidor. O nível de suporte atual é IE8 + (já é muito bom, olá). Existem 3 opções:
DENY：当前页面不能被嵌套iframe里，即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套iframe
SAMEORIGIN：iframe页面的地址只能为同源域名下的页面
ALLOW-FROM：可以在指定的origin url的iframe中加载- Opções de X-Frame: NEGAR
- Rejeitar qualquer solicitação iframe aninhada
- Opções de X-Frame: SAMEORIGIN
- Somente solicitações da mesma origem são permitidas. Por exemplo, se a página da web for foo.com/123.php, todas as páginas da web em foo.com podem ser incorporadas nesta página da web, mas páginas da web diferentes de foo.com não podem ser incorporadas
- Opções do X-Frame: ALLOW-FROM http://s3131212.com
- Permitir apenas solicitações de iframe de páginas da web especificadas, mas a compatibilidade é ruim, o Chrome não suporta
Na verdade, o X-Frame-Options entrega o controle js do iframe ao servidor para processamento.
//js
if(window != window.top){
window.top.location.href = window.location.href;
}
//等价于
X-Frame-Options: DENY
//js
if (top.location.hostname != window.location.hostname) {
top.location.href =window.location.href;
}
//等价于
X-Frame-Options: SAMEORIGIN
Este atributo é uma das principais restrições ao iframe da página. No entanto, o cabeçalho envolvido no iframe pode ser mais do que este e há também uma Política de Segurança de Conteúdo, que também pode restringir o iframe, e deve ser usado para futura proteção de segurança da web Convencional.
Proteção de página CSP
Como X-Frames-Options, você precisa definir o cabeçalho relevante no lado do servidor. A função do CSP é realmente muito grande. Ele pode evitar que sua página seja atacada por XSS, e você pode especificar js, css, A origem do img e outros recursos relacionados para evitar a injeção maliciosa. No entanto, sua compatibilidade também é um lixo. Atualmente suporta Edge12 + e IE10 +.
E atualmente no mercado, existem três cabeçalhos CSP populares e a compatibilidade de vários navegadores
O uso é configurado principalmente no servidor back-end. No front-end, podemos observar se existe um tal cabeçalho no cabeçalho de resposta:
Content-Security-Policy: default-src 'self'Isso mostra que sua página da web está habilitada para CSP. Normalmente podemos configurar vários caminhos de recursos especificados após o CSP, há
default-src,
script-src,
style-src,
img-src,
connect-src,
font-src,
object-src,
media-src,
sandbox,
child-src,
...
Se você não especificar, a estratégia de carregamento especificada por default-src é usada. A
configuração padrão é o mesmo domínio: default-src "self".
Aqui está um pouco relacionado a iframe é child-src e sandbox.
child-src é usado para especificar o caminho de carregamento efetivo do iframe. Na verdade, a configuração de allow-origin em X-Frame-Options é a mesma. No entanto, allow-origin não é compatível com os fornecedores.
No entanto, o sandbox é na verdade igual ao atributo sandbox do iframe (descrito abaixo). Ele pode especificar quais permissões a fonte pode ter.
Aqui está uma demonstração:
Content-Security-Policy: child-src 'self' http://example.com; sandbox allow-forms allow-same-originNo momento, o src do iframe só pode carregar páginas do mesmo domínio e example.com. Uma última coisa a acrescentar: o uso de CSP pode evitar ataques XSS. O princípio é que CSP escapará de estilos e scripts embutidos por padrão, bem como de execução de avaliação. No entanto, você pode usar srcipt-src para diminuir o limite.
Content-Security-Policy: script-src 'unsafe-inline'Se você quiser ter uma compreensão mais profunda do CSP, você pode se referir a: CSP , chinês CSP , CSP de H5rock
ok, o acima é basicamente um trabalho de proteção de segurança para evitar que suas próprias páginas de ser aninhados. Claro, há outro problema de segurança que enfrentamos, ou seja, quando iframei as páginas de outras pessoas, precisamos definir restrições de segurança. Embora a segurança dos iframes seja muito maior quando entre domínios, não há lugar seguro na Internet. Antigamente, fazíamos vários truques para evitar que nossas páginas fossem poluídas. Agora, uma nova sandbox de atributos fornecida por h5 pode resolver esse problema.
caixa de areia
O sandbox é usado para definir um modelo de sandbox para o iframe especificado para restringir mais permissões do iframe. O
sandbox é um novo atributo de h5, o IE10 + suporta (md ~). A
maneira de ativá-lo é usar o atributo sandbox:
<iframe sandbox src="..."></iframe>Isso irá impor uma série de restrições às páginas iframe:
1. script脚本不能执行
2. 不能发送ajax请求
3. 不能使用本地存储，即localStorage,cookie等
4. 不能创建新的弹窗和window
5. 不能发送表单
6. 不能加载额外插件比如flash等
Vendo isso, eu também estava bêbado. Um bom iframe, isso é um pouco demais para você. No entanto, você pode relaxar um pouco. Faça algumas configurações simples no sandbox
<iframe sandbox="allow-same-origin" src="..."></iframe>Os itens de configuração comumente usados são:
| Configuração | efeito |
|---|---|
| allow-forms | Permitir envio de formulário |
| allow-scripts | Executar script de execução |
| permitir a mesma origem | Permitir solicitações do mesmo domínio, como ajax, armazenamento |
| allow-top-navigation | Permitir que o iframe domine window.top para salto de página |
| allow-popups | Permitir que novas janelas apareçam no iframe, por exemplo, window.open, target = "_ blank" |
| allow-pointer-lock | Em um iframe pode bloquear o mouse, o principal e relacionado ao bloqueio do mouse |
Você pode adicionar permissão para prosseguir na sandbox.
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="..."></iframe>Desta forma, a execução do script js pode ser garantida, mas o javascript do iframe está proibido de executar top.location = self.location.
Ei, na verdade, o problema de segurança do iframe ainda é super. Como sequestro de localização, verificação de referências, etc. Mas, por enquanto, sabendo simplesmente fazer algumas medidas de segurança para acabar, os chapéus brancos vão nos ajudar a testar.
resolver iframe entre domínios
Um iframe é uma caixa de areia de isolamento, o que equivale a que podemos manipular muitas guias em uma página. Se você pisar no poço dos calçados infantis, saiba que a solução de cross-domain iframe também é muito abrangente.
Primeiro, precisamos esclarecer o que é cross-domain.
O navegador avalia se você cruza domínios, principalmente com base em dois pontos. Um é o protocolo da sua página e o outro é se o seu host é o mesmo, ou seja, o cabeçalho do url:
window.location.protocol +window.location.hostDeve-se enfatizar que o cabeçalho da URL deve ser o mesmo, como o nome de domínio de segundo nível ou endereço IP, que é considerado domínio cruzado.
//域名和域名对应ip, 跨域
http://www.a.com/a.js
http://70.32.92.74/b.js
//统一域名，不同二级域名。 跨域
http://www.a.com/a.js
http://a.com/b.js
Para o segundo método de domínio cruzado (o mesmo domínio principal, mas subdomínios diferentes), você pode usar iframe para resolvê-lo.
Em dois subdomínios diferentes (usando iframe aninhado no outro), a
saber:
HTTP: //www.foo.com/a.html e http: //script.foo.com/b.html
dois Adicione document.domain = 'foo.com' aos arquivos, especifique o mesmo domínio principal e, em seguida, os dois documentos podem interagir.
//b.html是以iframe的形式嵌套在a.html中
//www.foo.com上的a.html
document.domain = 'foo.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.foo.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在这里操纵b.html
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
//script.foo.com上的b.html
document.domain = 'foo.com';
Por padrão, document.domain se refere a window.location.hostname. Você pode alterá-lo manualmente, mas só pode defini-lo como o nome de domínio principal, no máximo. Normalmente, o nome de domínio principal se refere ao nome do host sem www, como: foo.com, baidu.com. Se você trouxer www ou outros prefixos, é um nome de domínio de segundo nível ou um nome de domínio de vários níveis. Através das configurações acima, após o mesmo domínio, você pode realizar operações relacionadas no mesmo domínio. Além disso, iframe e location.hash também podem ser usados, mas como a tecnologia foi lançada, não os apresentarei aqui.