[5.5] Add new json blade directive

[luiz-brandao]

This PR introduces a new @json directive for Blade. The purpose behind this new directive is to make it easier to inject PHP data structures into JS code while being IDE error free.

Alternatives to this approach like {!! $json !!} or {!! json_encode($data) !!} raise syntax errors in some IDEs (PhpStorm) but @json($data) doesn't.

Usage example:
let foo = @json($foo);

[m1guelpf]

👍 for making easier to interact with Vue components

[mateusjatenee]

I'd very much like this too.

[GrahamCampbell]

What use case do you have for writing JSON in HTML btw?

[luiz-brandao]

@GrahamCampbell often, you'll find yourself in situations where you want to pass some server-side string/array/collection/whatever to your JavaScript. There are a few different ways to achieve that and outputing JSON is the most straightforward way.

[hackel]

It would be rather nice if this method automatically called jsonSerialize on Collections and Models.

[eberkund]

So this is like a built in replacement for this package?
https://github.com/laracasts/PHP-Vars-To-Js-Transformer

[luiz-brandao]

@eberkund no, this blade directive is just a handy way to output json; the package you mention has other functionalities.

[luiz-brandao]

@hackel Eloquent models and Collections implement JsonSerializable, so jsonSerialize is implicitly called when we use json_encode.

[ryantology]

This should be used with extreme caution due to XSS exploits. The previous method of putting json on the page is:
{!! $json !!} When you see someone use {!! !!} this is a red flag to check the input for XSS. Because the default version of @json() does not use any of the escaping options, this leaves the method open to XSS.

I would suggest that the default value be 15 as done in symfony JsonResponse:

    // Encode <, >, ', &, and " characters in the JSON, making it also safe to be embedded into HTML.
    // 15 === JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT
    const DEFAULT_ENCODING_OPTIONS = 15;

[luiz-brandao]

I don't think the new default would be an issue. I could do a pull request if @taylorotwell agrees.

[franzliedke]

@taylorotwell @themsaid Please consider @ryantology's warning above. IMO, this is the only safe default here. Right now, the @json directive is very much open for XSS exploits.

As with most other Blade features, this feature should offer a safe default, and offer the flexibility to employ less-safe variants to people who explicitly want that (and thus probably know what they are doing). This is already possible with the second $options argument.