Alpine.js与Laravel中如何安全转义文本以正确显示内容？

嗨，我来帮你解决这个问题！

你遇到的问题根源在于：Laravel的Blade模板引擎默认通过{{ }}语法自动转义HTML实体，导致数据库里的&被转换成了&。当这个转义后的字符串赋值给Alpine.js的title变量时，Alpine将其当作普通文本绑定到输入框，最终就显示出了F & M而非预期的F & M。

下面给你两个安全的解决方案，完全不用担心中毒的{!! !!}带来的XSS风险：

方法一：使用Laravel的@json指令（推荐） #

Laravel的@json指令是处理这种场景的最佳选择，它会自动将PHP字符串转换为合法的JSON格式，同时安全处理所有特殊字符：

<input type="text" name="title" id="title" x-model="title" required />

<script> 
document.addEventListener('alpine:init', () => {
      Alpine.data('MyForm', () => ({ 
              title: @json($post->title),
      })) 
 }) 
</script>

为什么安全？ #

@json会把所有潜在的危险内容（比如<script>标签）转译为Unicode转义序列（例如\u003Cscript\u003E），Alpine解析后得到的是纯文本，不会被浏览器当作HTML执行，完美兼顾了显示正确性和安全性。

方法二：手动结合json_encode与html_entity_decode #

如果你更习惯手动处理，也可以用这个方式，原理和@json一致：

<script> 
document.addEventListener('alpine:init', () => {
      Alpine.data('MyForm', () => ({ 
              title: {!! json_encode(html_entity_decode($post->title)) !!},
      })) 
 }) 
</script>

这里的{!! !!}是安全的，因为json_encode已经提前把所有特殊字符转义成了JSON格式的安全字符串，输出的内容不会被解析为HTML。

用上面任意一种方法后，你的输入框就能正确显示F & M啦，同时完全不用担心网站的安全问题~

备注：内容来源于stack exchange，提问作者Luis