I am attempting to embed a public tweet into a Google Data Studio page. Side note - I wanted to use it like a tool tip so when a viewer would hover over a data point, the tweet would pop up, but I don't think that's possible.
My main issue is that, when attempting a URL Embed, I keep getting the error "Can't embed due to provider site restrictions." I tried using oEmbed API but that just produced the error "Can't load site."
I feel like there has to be a workaround (I can't use community connectors due to security issues, and can't use anything paid) that I just haven't come across yet.
Does anyone have any experience or knowledge of whether embedding a tweet into GDS is possible?
This is not possible. Data Studio's URL Embed creates an HTML iframe with the src set to the provided URL and thus has the same restrictions than iframe has.
Twitter has set the Content-Security-Policy frame-ancestors directive to 'self' which prevents any other website from embedding their content.
For example, if you try it with https://wikipedia.org/ you'll see that the embed works because Wikipedia does not have this restriction.
The frame-ancestors directive restricts the URLs which can embed the resource using frame, iframe, object, embed, or applet element.
Source: https://w3c.github.io/webappsec-csp/#directive-frame-ancestors
Related
I tried to deep link a Microsoft Teams static Tab containing an iframe.
The link to the tab works but I want to change the iframe based on the deep link. Which is possible with the use of task modules, since task modules use https://teams.microsoft.com/l/task/<APP_ID>**?url=<TaskInfo.url>**&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>
Which can be found here.
while deep links to tabs use
https://teams.microsoft.com/l/entity/<appId>/<entityId>?webUrl=<entityWebUrl>&label=<entityLabel>&context=<context>
I know about the official documentation for deep links in teams.
But I can't manage to achieve the same with the iframe as with the task module. Is this even possible?
It is possible, but basically you need some code your side to intercept what's coming in from Teams, and directing/setting the iframe src appropriately. For instance, on the deeplink, you can set the "subEntityId", which you could use to indicate which page you want to show in your frame. You'd need to query the Teams js context in your "container" page, in that case, and set the src of the iframe to the respective destination. You would be accessing context.subEntityId. It's possible to do this using the querystring options as well, I think. See here for more.
My site is not able to show uploaded youtube videos when the url is a mobile (m.) site, but it works for the normal youtube site. It seems to me that the mobile and normal urls differ in a pattern, as shown below:
http://www.youtube.com/watch?v=5ILbPFSc4_4
http://m.youtube.com/#/watch?v=5ILbPFSc4_4&desktop_uri=%2Fwatch%3Fv%3D5ILbPFSc4_4
obviously, the m. is added, as is the /#, and all the &desktop_uri... stuff.
and again:
http://www.youtube.com/watch?v=8To-6VIJZRE
http://m.youtube.com/#/watch?v=9To-6VIJZRE&desktop_uri=%2Fwatch%3Fv%3D8To-6VIJZRE
What we hope to do is check to see if the url is mobile site, and if it is, parse it so it shows as the normal site.
Does any one know if all youtube urls work this way--if this similar pattern works for all the same videos on mobile and normal sites?
In general, any time you attempt to parse URLs for sites (as opposed to web APIs) by hand, you're leaving yourself open to breakage. There's no "contract" in place that states that a common format will always be used for watch page URLs on the mobile site, or on the desktop site.
The oEmbed service is what you should use whenever you want to take a YouTube watch page URL as input and get information about the underlying video resource as output in a programmatic fashion. That being said, the oEmbed response doesn't include a canonical link to the desktop YouTube watch page, so it's not going to give you exactly what you want in this case. For many use cases, such as when you want to get the embed code for a video given its watch page URL, it's the right choice.
If you do code something by hand, please ensure that your code is deployed somewhere where it would be easy to update if the format of the watch pages ever do change.
Could anyone please tell how the site http://www.outsharked.com/imagemapster/default.aspx?what.html is working in such way? Modifying the url without loading/reloading the page. I think this is not done by html5. Because it works in IE6 which doesn't support html5.
I created that site. The commenter is correct, it uses Javascript to change the URL. There's nothing about how that navigation works that is different for IE6 - that browser supports the necessary client-side functionality to do this kind of thing. The basic functionality involves:
capturing click events on the nav, and loading the inner content via AJAX
update the URL to reflect a working direct URL to target.
The links also are valid anchor links that, in the absence of Javascript, would go to the same page (but load the whole thing). This is your basic AJAX web site setup with one minor difference. It's common practice to use a URLs like this in AJAX/single page web sites:
http://mysite.com/home#somepage
or even just
http://mysite.com/#somepage
Where the hashtag part represents the actual page a user has navigated to. If someone accessed that url directly, e.g. from outside the site, the site would use Javascript to load the correct content based on the hashtag, after the page had loaded. This means that there might be a little delay for the inner content to reflect the correct page, since it has to run another request after the initial page has loaded from the browser to get the inner content via AJAX.
I was trying to avoid that by creating a setup that worked completely with and without Javascript. If you go directly to a URL within the site such as http://www.outsharked.com/imagemapster/default.aspx?faq.html you will notice it loads the content directly. This URL will work even if Javascript is disabled. You can't actually do this using hashtags, since hashtag content is not sent to the server. Only the client knows what's after the hashtag in a URL. That's why I was using query strings to represent inner pages.
This site architecture was sort of an experiment at the time. It works pretty well but the code isn't fantastic, I didn't really do anything else with it, and I'm sure there are other better-fleshed-out/tested/full-featured frameworks out there to do much the same thing.
But it might not be a bad example of the nuts and bolts of creating a basic AJAX navigation setup, as a learning tool, since it's pretty concise, and also does HTML5 history navigation (e.g. so the back button works on modern browsers).
I'm trying to come up with a way to load a url, (https://tools.usps.com/go/ZipLookupAction!input.action in this case) in a jQueryUI dialog box instead of a traditional popup window.
So far, I've tried pulling in the page using an AJAX (AJAH :D) request, but each time, I get a status 200 but no data.
Here is the code from what I've tried: http://jsfiddle.net/Handyman/aXPU7/1/
I had thought that maybe the don't allow ajax requests to usps.com, but I tried a couple of my own sites with the same luck.
Is it even possible to do this without an iframe or a traditional style popup?
Might be easier to use a lightbox plugin like colorbox, jsFiddle.
$('#zipcode_lookup').colorbox({iframe:true, innerWidth:425, innerHeight:344});
Check out the Same Origin Policy.
In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.
You would need to use JSONP or a proxy.
I'm trying to get my Chrome extension working with the Google Calendar API. However, the way Google has set up the extension sandbox makes anything almost impossible.
I can't add the Calendar API using JavaScript because I've tried 200 different ways to include the http://www.google.com/jsapi library. Therefore, I want to try interact with the Calendar API with PHP. Is it even possible to do a POST from a Chrome extension in order to run my PHP file? If not, it's pretty much impossible to interact with any external API that doesn't have a downloadable library, isn't it? If that's the case, I don't see how you can make anything useful with Chrome extensions.
I think you are still having difficulties because you don't completely understand the difference between content scripts and background pages.
Content scripts have certain limits. They can't:
Use chrome.* APIs (except for parts of chrome.extension)
Use variables or functions defined by their extension's pages
Use variables or functions defined by web pages or by other content scripts
Make cross-site XMLHttpRequests
Basically all they can is access DOM of a page where they were injected and communicate with background page (by sending requests).
Background page thankfully doesn't have any of those limits, only it can't access pages user is viewing. Good news is that background page can communicate with content scripts (again through requests).
As you can see background page and content scripts supplement each other. If you use both at the same time you have almost no limitations. All you need is correctly split your logic between those two.
As to your initial question - content scripts can't make cross domain requests, but background pages can. You can read more here.