Conteúdo, segurança e atributos de design para IFRAME

click fraud protection

O iframe elemento incorpora outras páginas da web diretamente na página atual. HTML5 apresenta três novos atributos a este elemento para ajudar a resolver as questões de segurança e usabilidade do HTML4 iframe implementação.

O atributo 'sandbox'

O caixa de areia atributo do iframe elemento é um recurso de segurança útil para iframes. Quando você o coloca em um iframe elemento, o agente do usuário desabilita recursos que possam representar um risco de segurança para o site e seus usuários.

Por exemplo:

instrui o navegador a não permitir todos os recursos que possam representar um risco à segurança - portanto, nenhum plug-in, formulários, scripts, links externos, biscoitos, armazenamento local e acesso à página no mesmo site.

Então, usando o caixa de areia valores de palavra-chave, reative alguns dos recursos. Essas palavras-chave são:

  • formulários de permissão: Permitir o envio do formulário.
  • permitir a mesma origem: Permite que scripts acessem conteúdo como cookies do mesmo domínio de origem.
  • instagram viewer
  • allow-scripts: Permite que scripts sejam executados neste IFRAME.
  • allow-top-navigation: Permitir que os links iframe e scripts para o destino "_top"

Não defina os allow-scripts e permitir a mesma origem palavras-chave juntas no mesmo iframe. Se você fizer isso, a página incorporada poderá remover o caixa de areia atributo, negando seus benefícios de segurança.

O atributo 'srcdoc'

O srcdoc atributo fornece ao web designer mais controle sobre os iframes, bem como mais segurança. Em vez de vincular a uma página da web em outro URL, o web designer coloca o HTML que deve ser exibido em um iframe dentro de srcdoc atributo.

Colocando HTML que é criado por uma fonte não confiável, como um formulário, em um iframe você pode colocar em sandbox o conteúdo não confiável e ainda exibi-lo na página. Os comentários do blog são um exemplo. A maioria dos blogs oferece apenas um número limitado de tags HTML que os comentaristas podem usar em seus comentários. Mas, ao colocar esses comentários em uma área restrita iframe usando o srcdoc atributo, os comentários podem ser mais robustos e, ao mesmo tempo, proteger o site como um todo.

Segurança e Iframes

Os dois atributos acima fornecem segurança para o seu iframe elementos, mas eles não são uma defesa contra todos os sites maliciosos. Se o site malicioso puder convencer os visitantes do site a acessar o conteúdo hostil diretamente (por exemplo, digitando a URL no navegador), eles ainda poderão ser atacados.

Se você puder, defina o conteúdo que está na área restrita iframe Enquanto o text / html-sandboxed Tipo MIME.

O atributo 'perfeito'

O desatado atributo é um atributo booleano que diz ao navegador para exibir o iframe como se fosse parte do documento pai. Se você quer o seu iframe para exibir perfeitamente, basta incluir este atributo no elemento:

Mas fazendo o iframe seamless é mais do que apenas o visual, é também a forma como a página interage com a moldura. Algumas dicas:

  • Links no iframe irá abrir na janela principal, a menos que o iframe a página tem o destino "_SELF" definido.
  • CSS no iframe será adicionado à cascata de todo o documento.
  • O elemento raiz do iframe página é considerada filha de iframe.
  • A largura e altura do iframe são definidos de forma semelhante a como outros elementos de nível de bloco seria definido.
  • Quando o documento principal é visualizado por uma ferramenta de renderização de fala, como um leitor de tela, o iframe seria lido sem ser anunciado como um documento separado.

Qualquer script no documento pai afetaria o iframe documento da mesma maneira. Por exemplo, se um script listou todos os frames da página, os links no iframe seria listado também.

Em outras palavras, o desatado atributo faz muito mais do que apenas remover as bordas do iframe. Se você vai definir um iframe para ser transparente, você deve ter certeza do conteúdo para não adicionar nenhum risco de segurança ao seu site ao incorporar um site malicioso.

instagram story viewer