Problem assigning HTML with . text() and . html()

Asked

Viewed 175 times

-1

I need to insert the HTML that refers to an image with hyperlink received through an ajax function on the page, but for security reasons I can’t just insert directly, so I’m passing this HTML code through the . text() to a created div, and only after I assign this variable to . html(), but what is happening is that only the created div is recognized as HTML, the rest is displayed in plain text. How do I get everything recognized as HTML when inserting into my page, while maintaining insert security?

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

  • var banner = $('<div>').text(banner()); ?? you are defining the variable banner and calling as a function banner() within the .text() ? Can you explain it better?

  • @Sergio is right, this line should generate an error. You checked the browser console?

  • I believe it was only one case in which the deletion of code and reuse of nomenclatures ended up generating this small confusion. The variable banner receives the return value of a function banner() and places it inside a DIV which is later added to the ID element partners.

4 answers

12

Putting to execute can already see. The first turns into an HTML and will be interpreted by the browser this way, the second is a text like any other and will be printed on the page the way it is written, there will be no rendering creating a link as you should expect.

<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>

I put in the Github for future reference.

5

.html() treats the string as HTML.

.text() treats string as text.

4

The method .text() works just like that, rips off any HTML content and deals only with text. I don’t understand your restrictions, but you need to use .html() in place of .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


I confess that I had to read three times to try to understand what you have in mind and, from what I could abstract you should use jQuery.html() instead of jQuery.text(), for evaluation of the value as HTML.

This makes a lot of sense by simply considering API nomenclature: jQuery.html() takes HTML into consideration. jQuery.text(), nay.

Demonstration in the Fiddle

However, this security may be false, depending on how the server-side programming was done. My suggestion is that you only work with plain text by moving the data through JSON, who knows.

So you guarantee that there will be no "none" (yes, quotation marks, never know...) possibility of malicious code injection because you will add HTML according to the need of the GUI instead of blindly relying on an HTML that may be breached between the interceptable stages of a Request.

Browser other questions tagged javascript html jquery ajax

You are not signed in. Login or sign up in order to post.