-1

Estou precisando inserir o HTML que se refere a uma imagem com hyperlink recebida através de uma função ajax na página, porém por questões de segurança eu não posso simplesmente inserir diretamente, por isso estou passando este código HTML através do .text() para uma div criada, e só após eu atribuo esta variável ao .html(), porém o que está acontecendo é que apenas a div criada é reconhecida como HTML, o restante é exibido em texto puro. Como faço para que tudo seja reconhecido como HTML ao inserir em minha página, mantendo a segurança da inserção?

function start(){
    timer = setInterval( function(){
        var banner = $('<div>').text(banner()); // <a href="http://exemple.com/"><img src="imagem.jpg"/></a>
        $('#parceiros').html(banner);
    }, 3000);
}
3
  • var banner = $('<div>').text(banner()); ?? você está a defenir a variável banner e a chamar como função banner() dentro do .text() ? Pode explicar isso melhor?
    – Sergio
    Commented 31/05/2014 às 15:22
  • O @Sergio tem razão, essa linha deve gerar um erro. Você checou o console do browser?
    – bfavaretto
    Commented 31/05/2014 às 15:46
  • Acredito ter sido apenas um caso em que a supressão de código e reaproveitamento de nomenclaturas acabou gerando essa pequena confusão. A variável banner recebe o valor de retorno de uma função banner() e o coloca dentro de uma DIV a qual, posteriormente, é adicionada ao elemento de ID parceiros. Commented 31/05/2014 às 19:20

4 Respostas 4

12

Colocando para executar já dá para ver. O primeiro se transforma em um HTML e será interpretado pelo navegador desta forma, o segundo é um texto como outro qualquer e será impresso na página do jeito que está escrito, não haverá renderização criando um link como deve esperar.

<html>
<head>
  <title>HTML vs Text</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>
</html>

Coloquei no GitHub para referência futura.

5

.html() trata a string como HTML.

.text() trata a string como texto.

4

O método .text() funciona assim mesmo, arranca qualquer conteúdo HTML e lida só com texto. Não entendi bem suas restrições, mas você precisa usar .html() no lugar de .text():

function start(){
    timer = setInterval( function(){
        var banner = $('<div>').html(banner()); // <a href="http://exemple.com/"><img src="imagem.jpg"/></a>
        $('#parceiros').html(banner);
    }, 3000);
}
0

Confesso que tive que ler umas três vezes para tentar entender o que você tem em mente e, pelo que pude abstrair você deve usar jQuery.html() ao invés de jQuery.text(), para avaliação do valor como HTML.

Isso faz bastante sentido por simplesmente considerar a nomenclatura da API: jQuery.html() leva HTML em consideração. jQuery.text(), não.

Demonstração no Fiddle

No entanto essa sua segurança pode ser falsa, dependendo de como foi feita a programação do lado servidor. Minha sugestão é que você trabalhe apenas com texto puro trafegando os dados por JSON, quem sabe.

Assim você garante que não haverá "nenhuma" (sim, aspas, nunca sabe...) possibilidade de injeção de código malicioso pois você adicionará o HTML de acordo com a necessidade da GUI ao invés de confiar cegamente num HTML que pode vir a ser violado entre os estágios interceptáveis de uma Requisição.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .