Laravel 8 Blade input-group组件UTF-8编码特殊字符转义异常问题

这是典型的二次HTML实体转义问题，和你数据库的编码配置无关，问题出在Blade组件的属性取值逻辑上：
Laravel 8的Blade组件中$attributes是Illuminate\View\ComponentAttributeBag类的实例，使用数组语法$attributes['xxx']取属性值时，返回的已经是经过HTML实体转义后的内容；你再用Blade的默认转义语法{{ }}包裹，相当于对已经转义的内容做了第二次转义，就会把单引号对应的'中的&再次转义为&，最终得到你看到的异常输出。

优先使用属性袋的get()方法获取原始未转义的属性值，同时可以用get()的第二个参数设置默认值，替代冗余的三目判断。

修正后的组件代码 #

<div class="form-group" {{ $attributes->merge(['style' => $attributes->get('style', '')]) }}>
    @if($attributes->has('label'))
        <label for="{{ $attributes->get('id') }}">{{ $attributes->get('label') }}</label>
        <input type="text" 
               value="{{ $attributes->get('value', '') }}" 
               class="form-control form-control-sm" 
               name="{{ $attributes->get('name') }}" 
               id="{{ $attributes->get('id') }}" 
               placeholder="{{ $attributes->get('placeholder', '') }}">
    @else 
        <input style="width:100%;" type="text" value="{{ $attributes->get('value', '') }}" class="form-control form-control-sm" name="{{ $attributes->get('name') }}" id="{{ $attributes->get('id') }}" placeholder="{{ $attributes->get('placeholder', '') }}">
    @endif
</div>

备用方案（不推荐） #

如果你确认属性内容没有XSS风险，也可以直接用Blade非转义输出语法{!! !!}包裹原有取值代码，比如：

value="{!! isset($attributes['value']) ? $attributes['value'] : null !!}"

该方案存在跨站脚本攻击风险，仅做临时验证使用，不建议线上环境采用。

内容的提问来源于stack exchange，提问作者Hippo