Mettez à jour le modèle js.erb pour les options de la zone de sélection - gérez XSS en toute sécurité et affichez le texte correctement

Question

Je rends un fichier .js.erb dans une application Rails. Dans ce fichier, je mets à jour les options d'une boîte de sélection.

La chose la plus importante est que je le fasse de manière sécurisée XSS. Sur la base de cette solution Stack Overflow, faisant référence à l'aide-mémoire de prévention XSS basé sur OWASP DOM, je mets à jour les options de la zone de sélection de la manière suivante :

Essayez 1

// app/views/blogs/blogs_select_listing.js.erb

// 删除所有选项
$('#blog_select_box').children().remove();

// 遍历@blogs集合，将每个博客项目作为选项添加到选择框中
<% @blogs.each do |blog| %>
  var opt = document.createElement("option");
  opt.setAttribute("value", "<%= blog.id %>");
  opt.textContent = "<%= blog.name %>";
  $('#blog_select_box').append(opt);
<% end %>

• Problème : blog.name的显示文本被进行了HTML编码。例如，"Johnson & Johnson"的文本显示为："Johnson & Johnson". D'autres caractères spéciaux comme les apostrophes auront également le même problème d'affichage.

Essayez-en 2

Je sais que Rails en a un html_safe方法，所以我尝试使用它：我将"<%= blog.name %>";更新为"<%= blog.name.html_safe %>";.

• Problème : Quand je réussis blog.name设置为alert("Gotcha");来测试XSS时，它会出错：选项根本没有被更新。最终似乎问题是在这种上下文中使用html_safe, l'application ne sait pas quoi faire avec les guillemets doubles.

Essayez 3

Cette méthode semble fonctionner. Il a mis à jour les options et le texte d'affichage fonctionne correctement, tandis que l'option avec texte d'affichage alert("gotcha"); s'affiche simplement sous forme de texte et ne s'exécute pas sous forme de code :

// app/views/blogs/blogs_select_listing.js.erb

// 删除所有选项
$('#blog_select_box').children().remove();

// 遍历@blogs集合，将每个博客项目作为选项添加到选择框中
$('#blog_select_box')
.html("<%= j options_from_collection_for_select(@blogs, :id, :name) %>");

• Question : Je ne suis pas sûr que ce soit sûr. Je ne suis pas sûr car j'ai vu cet article qui disait que les alias pour j（escape_javascript) ne sont pas sûrs.

On ne sait pas comment mettre à jour les options de sélection du .js.erbmodèle d'une manière qui soit à la fois sûre et affiche correctement le texte.

Answer 1

Essayez de donner ma compréhension :

• Essayez 1

Bien que vous puissiez décoder les caractères spéciaux, ce n'est pas la méthode Rails.

• Essayez-en 2

html_safe ne garantit pas que le résultat de la chaîne est sûr, mais vous spécifiez explicitement que la chaîne est sûre afin que les balises HTML de la chaîne puissent être affichées au format HTML, cela ne résout donc pas le problème XSS.

string = '<div>html with string</div>'
<%= string.html_safe %> # 以HTML形式显示
<%= string %> # 以字符串形式显示

• Essayez 3

Selon cet article, il est sûr d'utiliser escape_javascript entre guillemets simples ou doubles.

# 安全
'<%= j string %>' # 或者
"<%= j string %>"

# 不安全
<%= j string %>  # 或者
`<%= j string %>`

Donc, essayez 3 est XSS sûr et la méthode Rails et est préféré.

Votre code peut être simplifié en :

# html()方法会替换原始内容，所以你不需要先删除它
$('#blog_select_box')
  .html("<%= j options_from_collection_for_select(@blogs, :id, :name) %>");