As the title states, I'm having a finicky issue with .NET Core 2.2. I'm using tag helpers all over, but on the specific page that I'm having trouble with, it's actually the most simple use-case of all:
<a class="logout" asp-page="/Admin/Logout">Logout</a>
Some relevant notes:
As of yesterday, it worked in all environments without any issues.
This morning I made some changes seemingly unrelated to this page, and published again.
In the published version (on Azure), the tag helpers for this page only don't render, but instead appear in the source code as literals. (e.g. <a asp-page="..."></a>)
Still works without issue locally.
Here is the directory structure. The page in question is /Admin/Index.cshtml:
And my _ViewImports.cshtml (which again, I haven't changed in months):
#using redacted
#namespace redacted.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Explicitly adding the taghelper to the .chshtml file has solved this for me in the past. Unfortunately I am not aware of why this issue occurs randomly. In my specific use case,we were using custom and third party tag helpers which we suspect was causing the issues.
Try adding this line to the /Admin/Index.cshtml file:
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
I'm writing a documentation with angular.
For now, i duplicate twice the code. Once in the button.component.html to make the componenbt appear, and the other is injected from the button.component.ts as a string so it's not interpreted.
The goal is to show the result you will get if you tips the code contain in pre balise.
I need to avoid these duplication cause when a component change, i need to modify twice the code.
I first have use to simulate include comportement but it's not working as the final content is the generated content and not the original content.
Then i checked how angular material perform for their documentation, and it's same to be a bit tricky and complicated for me has they inject their component as dependancies.
I'm asking if there is a sample way to avoid this duplication content and if someone have faced the same issue.
I have only one idea, it's to run a shell commande in the end of ng build with webpack and node, and get the content of the target block and inject directely in the target balise.
Sample :
<div class="my-5" data-source="myButton">
<button mat-button>
<mat-icon class="icon-left">help</mat-icon>
Support center
</button>
</div>
<code data-target="myButton"></code>
But i'm not very sur about that solution.
Thanks in advance.
Kevin
For people who have face the same problem, there is the module you have to use :
exemplify-angular
It's do the job perfectly.
Kevin
I've been working on the site https://founderspledge.com/ and just noticed that if you go to the main page, and open the Chrome console to view the source, there's an element that I certainly didn't put there:
<div class="pub_300x250 pub_300x250m pub_728x90 text-ad textAd
text_ad text_ads text-ads text-ad-links" style="position: absolute;">.</div>
It also doesn't show up when I run the site's code in localhost, or when I load the page source separately using Chrome's 'View Source' option.
I Googled the div's class list, and the top few hits were from anti-ad blocker software (eg https://github.com/sitexw/FuckAdBlock), which doesn't seem malign, but doesn't explain why it would be on this site.
So
1) How can I get rid of this element?
2) How might it have got there?
3) Does it imply there's a hole in the site's security?
UPDATE: Facebook have acknowledged this as a bug: https://developers.facebook.com/bugs/336662116810282/?hc_location=ufi
I'm so glad to find this issue - have been tearing my hair out to work out the same exact thing! I found it's coming from fbevents.js (https://connect.facebook.net/en_US/fbevents.js) version 2.8.7 - you can clearly see the code that adds the div in. It seems like this is something that has happened very recently? But likewise, I couldn't find anything other than references to anti adblocking scripts which had me concerned!
From the tutorial
But there's a problem! Our rendered comments look like this in the
browser: "<p>This is <em>another</em> comment</p>". We want those tags
to actually render as HTML.
That's React protecting you from an XSS attack. There's a way to get
around it but the framework warns you not to use it:
...
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
This is a special API that intentionally makes it difficult to insert raw HTML, but for Showdown we'll take advantage of this backdoor.
Remember: by using this feature you're relying on Showdown to be secure.
So there exists an API for inserting raw HTML, but the method name and the docs all warn against it. Is it safe to use this? For example, I have a chat app that takes Markdown comments and converts them to HTML strings. The HTML snippets are generated on the server by a Markdown converter. I trust the converter, but I'm not sure if there's any way for a user to carefully craft Markdown to exploit XSS. Is there anything else I should be doing to make sure this is safe?
Most Markdown processors (and I believe Showdown as well) allow the writer to use inline HTML. For example a user might enter:
This is _markdown_ with a <marquee>ghost from the past</marquee>. Or even **worse**:
<script>
alert("spam");
</script>
As such, you should have a whitelist of tags and strip all the other tags after converting from markdown to html. Only then use the aptly named dangerouslySetInnerHTML.
Note that this also what Stackoverflow does. The above Markdown renders as follows (without you getting an alert thrown in your face):
This is markdown with a ghost from the past. Or
even worse:
alert("spam");
There are three reasons it's best to avoid html:
security risks (xss, etc)
performance
event listeners
The security risks are largely mitigated by markdown, but you still have to decide what you consider valid, and ensure it's disallowed (maybe you don't allow images, for example).
The performance issue is only relevant when something will change in the markup. For example if you generated html with this: "Time: <b>" + new Date() + "</b>". React would normally decide to only update the textContent of the <b/> element, but instead replaces everything, and the browser must reparse the html. In larger chunks of html, this is more of a problem.
If you did want to know when someone clicks a link in the results, you've lost the ability to do so simply. You'd need to add an onClick listener to the closest react node, and figure out which element was clicked, delegating actions from there.
If you would like to use Markdown in React, I recommend a pure react renderer, e.g. vjeux/markdown-react.
I know that an image can be placed in an MD with the MD syntax of either  or , but I am having difficulty placing an SVG in MD where the code is hosted on GitHub.
Ultimately using rails3, and changing the model frequently right now, so I am using RailRoady to generate an SVG of the schema diagram of the models. I would like for that SVG to then be placed in the ReadMe.md, and be displayed. When I open the SVG file locally, it does work, so how do I get the browser to render the SVG in the MD file? Given that the code will be dynamic until it is finalized (seemingly never), hosting the SVG in a separate place seems overkill and that I am missing an approach to accomplish this.
The SVG I am trying to include is here on GitHub: https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg
I have tried the following, with an actual image as well to verify the syntax is working, just that the SVG code isn't being rendered:
![Overview][1]
[1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg "Overview"
<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">
[Google Doc](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) :
<img src="https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720">
<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">
<img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit">
to get the results of:
1: https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Overview"
Google Doc :
The purpose of raw.github.com is to allow users to view the contents of a file, so for text based files this means (for certain content types) you can get the wrong headers and things break in the browser.
When this question was asked (in 2012) SVGs didn't work. Since then Github has implemented various improvements. Now (at least for SVG), the correct Content-Type headers are sent.
Examples
All of the ways stated below will work.
I copied the SVG image from the question to a repo on github in order to create the examples below
Linking to files using relative paths (Works, but obviously only on github.com / github.io)
Code
<img src="./controllers_brief.svg">
Result
See the working example on github.com.
Linking to RAW files
Code
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Result
Linking to RAW files using ?sanitize=true
Code
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true">
Result
Linking to files hosted on github.io
Code
<img src="https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Result
Some comments regarding changes that happened along the way:
Github has implemented a feature which makes it possible for SVG's to be used with the Markdown image syntax. The SVG image will be sanitized and displayed with the correct HTTP header. Certain tags (like <script>) are removed.
To view the sanitized SVG or to achieve this effect from other places (i.e. from markdown files not hosted in repos on http://github.com/) simply append ?sanitize=true to the SVG's raw URL.
As stated by AdamKatz in the comments, using a source other than github.io can introduce potentially privacy and security risks. See the answer by CiroSantilli and the answer by DavidChambers for more details.
The issue to resolve this was opened on Github on October 13th 2015 and was resolved on August 31th 2017
I contacted GitHub to say that github.io-hosted SVGs are no longer displayed in GitHub READMEs. I received this reply:
We have had to disable svg image rendering on GitHub.com due to potential cross site scripting vulnerabilities.
Update 2020: how they made it work while avoiding XSS attacks
GitHub appears to use two security approaches, this is a good article: https://digi.ninja/blog/svg_xss.php see also: https://security.stackexchange.com/questions/148507/how-to-prevent-xss-in-svg-file-upload
show SVG inside <img tag, which prevents scripts from running, e.g. on READMEs: https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a
use Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox. This prevents the script from running even in raw which contains the raw SVG file: https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg
You can see the header with curl -vvv. The regular github.com pages also have a content-security-policy, but it is much larger.
Update 2017
A GitHub dev is currently looking into this: https://github.com/github/markup/issues/556#issuecomment-306103203
Update 2014-12: GitHub now renders SVG on blob show, so I don't see any reason why not to render on README renderings:
https://github.com/blog/1902-svg-viewing-diffing
https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
Also note that that SVG does have an XSS attempt but it does not run: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
The billion laugh SVG does make Firefox 44 Freeze, but Chromium 48 is OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg
Petah mentioned that blobs are fine because the SVG is inside an iframe.
Possible rationale for GitHub not serving SVG images
general XML vulnerabilities. E.g. opening a billion laughs exploit just made Firefox crash my system. Firefox bug with exploit attached: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html. Same on Chromium: https://code.google.com/p/chromium/issues/detail?id=231562
SVG XSS scripting: while most browsers don't run scripts when the SVG is embedded with img, it seems that this is not required by the standards, so maybe GitHub is playing it safe.
Browsers do run it if you open the SVG directly (but it appears that GitHub never shows images directly on the github.com domain) or if it is inline (which are currently completely removed by GitHub), so those cases shouldn't be a security concern. Relevant links:
spec: http://www.w3.org/TR/SVG/script.html
interactive SVG demo: http://www.w3.org/TR/SVG/images/script/script01.svg
The following questions asks about the risks of SVG in general: https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload
rawgit.com solves this problem nicely. For each request, it retrieves the appropriate document from GitHub and, crucially, serves it with the correct Content-Type header.
Since Jan. 2022, that seems possible (and easy):
Allow to upload .svg files to Markdown
It is now possible to upload .svg files to comments in issues, PRs, discussions, and Markdown files, like READMEs.
You just have to drag and drop the file in the text area.
This will work. Link to your SVG using the following pattern:
https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg
The downside is hardcoding the owner and repo in the path, meaning the svg will break if either of those are renamed.
I have a working example with an img-tag, but your images won't display.
The difference I see is the content-type.
I checked the github image from your post (the google doc images don't load at all because of connection failures). The image from github is delivered as content-type: text/plain, which won't get rendered as an image by your browser.
The correct content-type value for svg is image/svg+xml. So you have to make sure that svg files set the correct mime type, but that's a server issue.
Try it with http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg and don't forget to specify width and height in the tag.
Just like this worked for me on Github.
or
<img src="ImageAddressOnGitHub.svg">
In addition to regular SVGs, you can also insert animated SVG images in the markdown file like any other format. It can be a good alternative to GIF images.
Use relative links if both your animated SVG and your markdown file are in the same GitHub repository:
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>
Example (assuming the image is in assets directory in the repository):
Result:
Use this site: https://rawgit.com , it works for me as I don't have permission issue with the svg file.
Please pay attention that RawGit is not a service of github, as mentioned in Rawgit FAQ :
RawGit is not associated with GitHub in any way. Please don't contact GitHub asking for help with RawGit
Enter the url of svg you need, such as :
https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg
Then, you can get the url bellow which can be used to display:
https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg