Mixing
How to escape string data passed from laravel to vuejs
I'm setting up a new website and I'd like to send data from the Laravel blade template to the Vue.js front end.
I've tried passing the php property into an html proprerty I can access from vue and this works with simple strings.
<div id="paragraphs" originaldata="{!! $band->paragraphs !!}">
...
mounted: function() {
this.paragraphs = this.$el.attributes.originaldata.value.split('//')
this.paragraphs.push('')
}
This does not with strings containing double quotes or html tags. I have tried binding to a prop using single quoted json_encoded data however this output breaks the prop-parsing in the browser and leaves bits of html and data scattered in the DOM.
javascript laravel vue.js
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
add a comment |
I'm setting up a new website and I'd like to send data from the Laravel blade template to the Vue.js front end.
I've tried passing the php property into an html proprerty I can access from vue and this works with simple strings.
<div id="paragraphs" originaldata="{!! $band->paragraphs !!}">
...
mounted: function() {
this.paragraphs = this.$el.attributes.originaldata.value.split('//')
this.paragraphs.push('')
}
This does not with strings containing double quotes or html tags. I have tried binding to a prop using single quoted json_encoded data however this output breaks the prop-parsing in the browser and leaves bits of html and data scattered in the DOM.
javascript laravel vue.js
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
Which Laravel version are you using?
– Mozammil
Jan 1 at 8:29
add a comment |
I'm setting up a new website and I'd like to send data from the Laravel blade template to the Vue.js front end.
I've tried passing the php property into an html proprerty I can access from vue and this works with simple strings.
<div id="paragraphs" originaldata="{!! $band->paragraphs !!}">
...
mounted: function() {
this.paragraphs = this.$el.attributes.originaldata.value.split('//')
this.paragraphs.push('')
}
This does not with strings containing double quotes or html tags. I have tried binding to a prop using single quoted json_encoded data however this output breaks the prop-parsing in the browser and leaves bits of html and data scattered in the DOM.
javascript laravel vue.js
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
I'm setting up a new website and I'd like to send data from the Laravel blade template to the Vue.js front end.
I've tried passing the php property into an html proprerty I can access from vue and this works with simple strings.
<div id="paragraphs" originaldata="{!! $band->paragraphs !!}">
...
mounted: function() {
this.paragraphs = this.$el.attributes.originaldata.value.split('//')
this.paragraphs.push('')
}
This does not with strings containing double quotes or html tags. I have tried binding to a prop using single quoted json_encoded data however this output breaks the prop-parsing in the browser and leaves bits of html and data scattered in the DOM.
javascript laravel vue.js
javascript laravel vue.js
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
asked Jan 1 at 8:26
Fred StidstonFred Stidston
225
225
Which Laravel version are you using?
– Mozammil
Jan 1 at 8:29
add a comment |
Which Laravel version are you using?
– Mozammil
Jan 1 at 8:29
Which Laravel version are you using?
– Mozammil
Jan 1 at 8:29
Which Laravel version are you using?
– Mozammil
Jan 1 at 8:29
add a comment |
1 Answer
1
active
oldest
votes
You can hang encoded data from DOM elements and decode the content within a Vue component lifecycle hook.
// consider some arbitrary data passed from a Laravel controller containing HTML tags.
$data = '<form id="test"></form><button form="test" formaction="javascript:alert(1)">X</button>';
// echo the data within a blade layout or page element. CSRF tokens are often passed over this way.
<meta content="{{ base64_encode($data) }}" name="encoded">
// when your Vue component loads you can then access the DOM
export default {
mounted () {
const data = document.querySelector('meta[name="encoded"]').content
alert(atob(data))
}
}
Here's a basic demo with vanilla PHP / JavaScript
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994047%2fhow-to-escape-string-data-passed-from-laravel-to-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can hang encoded data from DOM elements and decode the content within a Vue component lifecycle hook.
// consider some arbitrary data passed from a Laravel controller containing HTML tags.
$data = '<form id="test"></form><button form="test" formaction="javascript:alert(1)">X</button>';
// echo the data within a blade layout or page element. CSRF tokens are often passed over this way.
<meta content="{{ base64_encode($data) }}" name="encoded">
// when your Vue component loads you can then access the DOM
export default {
mounted () {
const data = document.querySelector('meta[name="encoded"]').content
alert(atob(data))
}
}
Here's a basic demo with vanilla PHP / JavaScript
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
add a comment |
You can hang encoded data from DOM elements and decode the content within a Vue component lifecycle hook.
// consider some arbitrary data passed from a Laravel controller containing HTML tags.
$data = '<form id="test"></form><button form="test" formaction="javascript:alert(1)">X</button>';
// echo the data within a blade layout or page element. CSRF tokens are often passed over this way.
<meta content="{{ base64_encode($data) }}" name="encoded">
// when your Vue component loads you can then access the DOM
export default {
mounted () {
const data = document.querySelector('meta[name="encoded"]').content
alert(atob(data))
}
}
Here's a basic demo with vanilla PHP / JavaScript
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
add a comment |
You can hang encoded data from DOM elements and decode the content within a Vue component lifecycle hook.
// consider some arbitrary data passed from a Laravel controller containing HTML tags.
$data = '<form id="test"></form><button form="test" formaction="javascript:alert(1)">X</button>';
// echo the data within a blade layout or page element. CSRF tokens are often passed over this way.
<meta content="{{ base64_encode($data) }}" name="encoded">
// when your Vue component loads you can then access the DOM
export default {
mounted () {
const data = document.querySelector('meta[name="encoded"]').content
alert(atob(data))
}
}
Here's a basic demo with vanilla PHP / JavaScript
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
You can hang encoded data from DOM elements and decode the content within a Vue component lifecycle hook.
// consider some arbitrary data passed from a Laravel controller containing HTML tags.
$data = '<form id="test"></form><button form="test" formaction="javascript:alert(1)">X</button>';
// echo the data within a blade layout or page element. CSRF tokens are often passed over this way.
<meta content="{{ base64_encode($data) }}" name="encoded">
// when your Vue component loads you can then access the DOM
export default {
mounted () {
const data = document.querySelector('meta[name="encoded"]').content
alert(atob(data))
}
}
Here's a basic demo with vanilla PHP / JavaScript
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
edited Jan 1 at 10:02
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
answered Jan 1 at 9:37
DigitalDrifterDigitalDrifter
8,6552625
8,6552625
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994047%2fhow-to-escape-string-data-passed-from-laravel-to-vuejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Which Laravel version are you using?
– Mozammil
Jan 1 at 8:29