使用 Blade 双重编码安全地为 Vue 组件提供种子

编辑注： 从 Laravel 5.6 开始，这不再需要！

您可以使用新的 Blade 双重编码方法轻松地将 JSON 数据嵌入到 Vue 组件中。如果您将 Vue 组件与 Laravel 等服务器端应用程序一起使用，您很可能已经使用一些 JSON 数据或用户生成的内容 (UGC) 为 Vue 组件提供种子，这些数据或内容看起来像以下内容

@extends('layout')
@section('content')
 
    <div id="app">
        <example-component
            :example-data="{{ json_encode([
                'wrestler_name' => '"Mercenary" Keith Anderson'
            ]) }}"
        >
        </example-component>
    </div>
 
@endsection

不幸的是，如果您的数据包含 HTML 实体，您的 Vue 应用程序将完全停止运行。

从 Laravel 5.5.29 开始，Taylor Otwell 引入 了一个 doubleEncode() 方法到 Blade 编译器，该方法可以轻松解决此问题。

Adam Walthan 在推特上发布了如何使用双重编码以及以下示例

???? 如果您曾经在 Blade 模板中使用 JSON 数据为 Vue 组件提供种子，那么您*绝对*需要启用双重编码。

没有它，任何用户提交的数据中出现的恶意 """ 可能会破坏您的前端！ pic.twitter.com/kifQ3ksv6H

— Adam Wathan (@adamwathan) 2018 年 1 月 19 日

幸运的是，只需在您的 AppServiceProvider::boot() 方法中添加新的 Blade::doubleEncode() 方法即可轻松解决此问题

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Blade::doubleEncode();
    }
}

我分享的原始 <example-component> 示例现在使用双重编码后看起来像以下内容

我一直与使用 JSON 数据为 Vue 组件提供种子作斗争，我很高兴 Laravel 现在可以自动使这些事情变得更加容易处理！