I have an HTML document with JSON-LD published as follows:
<script type="application/ld+json">
{
"#context": {
"gs1": "http://vocab.gs1.org/v1#",
"xsd":"http://www.w3.org/2001/XMLSchema#"
},
"#id": "retailer:12345",
"#type": "gs1:Offering",
"gtin13":"5011476100111",
"gs1:hasPrice": {
"gs1:price": "2.49",
"gs1:priceTypeCode": "USD",
"#type":"gs1:Price"
}
}
</script>
This works as expected (meaning it is valid and visible using Google Structured Data Testing Tool and Structured Data Linter)
Using Same Origin (not Cross Origin), how to move the in-line JSON-LD to a file?
This approach fails:
<script type="application/ld+json" src="_URL_.json"></script>
This approach also fails:
<script type="application/ld+json">
$(document).ready(function(){
$.ajax({
url: "_URL_.json",
dataType: 'json',
});
});
</script>
How to correct my approach to create a solution where the JSON-LD is in file on my server, not in the HTML?
Next, assume my site is CORS-enabled.
How to publish the JSON-LD structure in a JSONP format so that another domain can subscribe to the JSON-LD data?
Tools like the Google Structured Data Testing Tool or the Structured Data Linter don’t support external references. And probably many consumers of your JSON-LD neither.
If you want to do it anyway, you would have to use a link instead of a script element, because for the use as data block, the script element may not have a src attribute.
The variant with including the JSON-LD dynamically might work for consumers that support JavaScript for that purpose. (Google seems to support it; maybe it’s only their testing tool that can’t use it.)
You could generate your script tag dynamically:
<script>
// do some ajax, get the JSON-LD as `data` and then...
$.ajax(...).done(function(data) {
var el = document.createElement('script');
el.type = 'application/ld+json';
el.text = JSON.stringify(data);
document.querySelector('body').appendChild(el);
});
</script>
Related
Using express framework -
I am loading an initial JSON state representation into my template that my react front end will rehydrate its initial state from, but I'm wondering if it is safe to do something like this -
<script type="text/javascript">
window.INIT_DATA = <%- initialState %>
</script>
The output of that if I view the page source might look something like this -
<script type="text/javascript">
window.INIT_DATA = {"recentImages": [ 11342, 11344, 11432 ], "lastOnline": "Yesterday"}
</script>
Is this safe to do? Are there any good practices to follow? Thanks
No, this is not safe. Suppose the initialState contains a string that looks like this:
"hello! </script><script>alert("PWND")</script>"
This will cause the embedded code to run. In other words: if the JSON you're embedding contains any user supplied strings you're opening the door to XSS attacks.
To prevent this, replace </ with <\/, and <!-- with <\!--. In JSON strings \/ and \! will be interpreted as a simple slash or exclamation mark, so this doesn't change the semantics of the JSON, but it will prevent the HTML parser from seeing a closing tag.
I don't see why this wouldn't be safe? However I suggest you don't store the variable in the window object; it is discouraged as the window is a global object.
Is it possible to externalize json-ld and include it in an html document like this:
<script type="text/javascript" src="http://www.example.com/data123.jsonld"></script>
There doesn't seem to be any documentation about this online....
You can't do that. You should get the json with an AJAX request.
You can do it easy with jQuery
JS
$(function(){
$.getJSON("data123.jsonld", function(data) {
$('.json').text(data);
});
});
HTML
<div class="json"></div>
If your json file is not in your file system (cross domain) you should try something like this.
I use RichFaces to develop some web pages, basically I'd like to display a list of my data with DataTable. But my manage bean will take a long time to obtain resource data, which blocks the web page display.
My goal is to dynamically display them, First display the web page (maybe no data yet), then once my manage bean reads one new data, it displays this as a new row in my DataTable, any idea how can I do that? or maybe a similar example is appreciate.
Load the page then fetch data using JavaScrip via an Ajax call. Ajax is very easy to implement using jQuery.
jQuery Ajax Documentation
Example: Untested!! But its something like this..
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
// Run on page load
$(function() {
$.ajax({
url: "getMyData.html",
type: "GET"
}).success(function(data) {
// My data is in "data", if it is html then
$("#myDiv").html(data);
});
});
</script>
</head>
<body>
<h1>Hello</h1>
<div id="myDiv"></div>
</body>
So I am planning on dynamically changing a page's content by fetching it from another page.
To do so, I used Mootools' Request class:
var tabContent = new Request({
url: 'foo/bar/baz.php',
onSuccess: function(data) {
$('tab_container').innerHTML = data;
}
}).send();
In any case, the HTML is fetched fine, and returns without a hitch. However, I'd like to add some events to THOSE fetched elements (Fx.slide, to be precise), and that requires some js to be included in the requested file.
Upon inspection of the returned data, the javascript is intact. However, it does not show up in the final product. That is, somewhere in between having received the data, and rendering the data (via the innerHTML bit) it seems as though the javascript has been excised out for some reason.
Hm.
add evalScripts: true to the Request options, then include the script in a simple <script></script> block at the bottom of the response.
Based on Please explain JSONP, I understand that JSONP can be used to get around the same-origin policy.
But in order to do that, the page must use a <script> tag.
I know that pages can dynamically emit new script tags, such as with:
<script type="text/javascript" language='javascript'>
document.write('<script type="text/javascript" ' +
'id="contentloadtag" defer="defer" ' +
'src="javascript:void(0)"><\/script>');
var contentloadtag=document.getElementById("contentloadtag");
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete") { init(); }
}
</script>
(the above works in IE, don't think it works in FF).
... but does this mean, effectively, that every JSONP call requires me to emit another <script> tag into the document? Can I remove the <script> tags that are done?
Yes, every request yields a new <script> tag, and yes, you can remove <script> tags when you're done using the data that it provides to you.
You should consider using a Javascript library for JSONP. OX.AJAST is a simple library I wrote some time ago for doing asynchronous request through script tags (i.e. JSONP) across browsers. YUI also supports JSONP if you're already using that.