Content Security Policy for LinkedIn Share Button - linkedin

I'm currently trying to add the LinkedIn share button to my site, with the <script type="IN/Share"></script> tag. However I have a fairly strong Content Security Policy and it looks like it requires an unsafe-inline for both style-src and script-src which is obviously something I'm not prepared to do as I might as well just not have a CSP at that point.
Does anyone know a way of getting the share button to display correctly without having to enable these?

You'll need to either use a nonce or sha hash. If it's just the Linkedin plugin and the code is the same on every page (like I hope it would be), you just need the sha hash included with your existing directives, something like:
script-src: 'sha-35443567457455424532765'
Google Chrome will generate sha hashes for you in the dev tools, just copy the strings it gives you for the resources you need to load, reload with the new CSP and confirm if it works. Test multiple pages to be sure it covers all cases.
Using sha can get messy if you have code that adds a large amount of inline style/scripts, but if it's a single widget like this it should only take one/a few. The exact sha hash will change as Linkedin's code changes (and may even depend on variables set when creating the button) so I haven't included an exact hash as it'd be unlikely to work.

You can now do this easily using https://sharingbuttons.io
Here is a Share button for LinkedIn. Replace MY_URL and MY_TEXT with your strings.
<!-- Sharingbutton LinkedIn -->
<a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&url=MY_URL&title=MY_TEXT&summary=MY_TEXT&source=MY_URL" target="_blank" rel="noopener" aria-label="Share on LinkedIn">
<div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solidcircle">
<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M9.5,16.5h-2v-7h2V16.5z M8.5,7.5 c-0.553,0-1-0.448-1-1c0-0.552,0.447-1,1-1s1,0.448,1,1C9.5,7.052,9.053,7.5,8.5,7.5z M18.5,16.5h-3V13c0-0.277-0.225-0.5-0.5-0.5 c-0.276,0-0.5,0.223-0.5,0.5v3.5h-3c0,0,0.031-6.478,0-7h3v0.835c0,0,0.457-0.753,1.707-0.753c1.55,0,2.293,1.12,2.293,3.296V16.5z" />
</svg>
</div>Share on LinkedIn</div>
</a>

Related

Problems with videos when reloading

I want to insert a video using A-Frame. I'm using VS Code and hosting the site through live servers. When I start the page from it or works from a link dies very well too.
But when I reload the page, the video is just black.
This is my code snippet:
</a assets>
<a-video src="#penguin-sledding" width="16" height="9" position="0 0 -20" foo="block"></a-video>

Can I display a G Suite User Photo with the just the thumbnailPhotoUrl?

Question
Can a web app display a G Suite user's profile image using just the thumbnailPhotoUrl, or is it necessary to save and serve the image?
Context
This Guide describes how to get the image from the Directory API. But I'm not sure how to move from the get request to an image file I can display. There is mention of the Closure Library to use for Base64 encoding/decoding.
I'd like to use a link to the image, to use as the src of an img element.
What I've Tried
A firebase cloud function using a service account with domain-wide delegation is retrieving user data via https://www.googleapis.com/admin/directory/v1/users. This returns the thumbnailPhotoUrl, and I'm able to paste the URL into chrome and view the image. If I share the thumbnailPhotoUrl with someone else, they do not see the image but see the silhouette placeholder instead.
Note: the thumbnailPhotoUrl includes /private like this:
https://www.google.com/s2/photos/private/xyz123...
Is that a clue that this URL will not work in the web app to display the image?
You can embed the contents of the URL directly into your HTML document. It looks like this:
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
The magic part is taking the image binary data and base-64 encoding it for the img tag.
The format of the above example:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
This link provides more details and shows how to do this.

How do you add an SVG with no loc to an xml sitemap?

I'm trying to add an xml sitemap to my site via Google instructions at https://support.google.com/webmasters/answer/183668?hl=en&ref_topic=4581190. My primary goal is to include metadata about several SVGs on my page. These SVGs are defined without a url, and then used later as containers for NVD3 charts like so:
<div id='chart'>
<svg style='height:600px; width:100%'> </svg>
</div>
However, the sitemap process appears to identify images based on their location. How can I add these svgs to my sitemap, or is this not possible?

Track custom firefox search engine with google analytics

I made a custom Firefox search engine. It used the code below. Is it possible for me to track the use of this on the site. My concern is that searches form the firefox search engine will look like direct visits in google analytics. I would like to tag the searches or some other solution. I kinda hacked this together i.e. a newbie at this.
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>ICD9 Code Search</ShortName>
<Description>Search ICD9 Code Search</Description>
<Tags>schadenfreude</Tags>
<Image height="16" width="16" type="image/x-icon">https://drchrono.com/favicon.ico</Image>
<Url type="text/html" method="GET" template="https://drchrono.com/billing/medical_codes/?code_type=icd9_procedures&search_text={searchTerms}&Submit=Search&search_hcpcs_level2_codes=on&search_hcpcs_level2_modifiers=on"/>
<InputEncoding>UTF-8</InputEncoding>
<AdultContent>false</AdultContent>
</OpenSearchDescription>
Could you not add a dummy query parameter that does not affect behaviour but can be used when analysing logs? E.g.:
<Url type="text/html" method="GET" template="https://drchrono.com/billing/medical_codes/?code_type=icd9_procedures&search_text={searchTerms}&Submit=Search&search_hcpcs_level2_codes=on&search_hcpcs_level2_modifiers=on&source=firefox_se"/>
What you need is called campaign tagging. You can append special arguments to the URL that will be recognized by the Google Analytics script running on your site and collected on GA's Traffic Sources/Campaigns report. There is an online URL builder tool by Google that helps you creating the campaign tags.

Images in RSS feed

Whenever I see images in an RSS feed, they are embedded in CDATA, rather than surrounded by tags.
In my feed, I would like the images to show up without doing that.
Whether in the browser, or a feed reader (Bloglines) or through FeedBurner, the following structure does not show images, although it is valid RSS. Does anyone have experience with this?
<item>
<category>Viewbook</category>
<title>Widget</title>
<description>Learn more about our widgets.</description>
<link>http://www.widget.com/Default.aspx</link>
<image>
<url>http://www.widget.com/images/thumb.gif</url>
<title>Widget</title>
<link>http://www.widget.com/Default.aspx</link>
<description>Learn more about our widgets.</description>
</image>
</item>
On Colonol Sponsz' hint, I researched:
There's no image tag for items, only for the channel. So you have to do it via the CDATA tag.
For completeness: In RSS 2.0, you CAN have a single enclosure inside an item, which per the spec. can be for a single image. However I understand that support among feed aggregators varies. More typically this is used for things like podcasts. The RSS 2.0 standard states:
<enclosure> is an optional sub-element of <item>.
It has three required attributes. url says where the enclosure is located, length says how big it is in bytes, and type says what its type is, a standard MIME type.
The url must be an http url.
Note that you must include the size of the item, along with the URL and mime type.
However, as others indicated, including the picture(s) in CDATA is much more common.
I believe you can use <media:content ....> items with good support by most rss readers, it is working flawlessly for us on mailchimp (rss to email newsletter).
See http://kb.mailchimp.com/article/how-can-i-format-the-image-content-in-my-rss-to-email-campaigns
EDIT: Here's a live link: https://blog.mailchimp.com/rss-to-email-enhancement-for-publishers/
You can use the media:content element (spec) within item.
Make sure you declare the MRSS (Media RSS) namespace (the xmlns:media attribute, below) for this element, if it is not declared for the whole RSS feed, as it won't validate otherwise. (E.g., out-of-the-box WordPress.)
<media:content
xmlns:media="http://search.yahoo.com/mrss/"
url="http://www.widget.com/images/thumb.gif"
medium="image"
type="image/jpeg"
width="150"
height="150" />
This may or may not display as you'd like; you'd have to experiment. Embedding in content is in that way simpler, though this route helps with things like MailChimp integration (h/t this answer) or other custom solutions.
An example implementation for WordPress is in my answer here.
Use, e.g.:
<enclosure url="http://www.scripting.com/mp3s/weatherReportSuite.mp3" length="12216320" type="audio/mpeg" />
Documentation here
It works with a seperate tag, as you said. The problem is the specification of version 2.0.
I know, there are feed reader that does supress images for bandwidth reasons.
Source: RSS specification 2.0 via Wikipedia

Resources