We are using External SVG Sprite file (in form of HTML) in our Angular application which is referenced using <use xlink:href
There were no issues till we implemented SEO to remove hash from Angular by having
$locationProvider.html5Mode(true);
If mode is true SVG loads fine in all browsers using external links. However, with the mode as true it works fine in IE11 but does not load in Google Chrome and firefox.
The peculiar behavior is that all SVGs appear on the first time load in these browsers however, post an event on UI to invoke other nested views SVG stops loading.
Related
Let's say I have the following setup:
React Application at /
A previously existing application at /path/to/application
A JPG at /assets/image.jpg
A static HTML file for use in an iFrame at /static/index.html
ReactRouter (react-router-dom) is attempting to resolve all of these scenarios - displaying the Not Found component in example 2, 3 and 4 as they are naturally not configured.
Strangely, this behaviour seems to differ per browser. Safari and Firefox Quantum resolve as expected, but Chrome does not. For example, in the iFrame example, Chrome is displaying a new instance of the entire root React app inside the iFrame, whereas Safari and Firefox are loading the static HTML file contents.
I have tried using HashRouter instead of BrowserRouter but with no luck.
Is there a way I can configure my React application to ignore specific child paths, to allow the server a chance to handle this content?
I've got a chrome extension working nicely w/ a popup, but can't get local images in the popup to render in the ported firefox webextension. the popup renders no images and the HTML rendered is:
<img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png">
After researching this error, I've tried various permutations of the CSP setting in the manifest.json file. Here's the code in the manifest file I've used (also included is the web accessible resources, which was recommended as well):
"web_accessible_resources": [
"assets/img/*.png"
],
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
I'm rendering the image w/ angular in the popup.html page:
<img ng-src="{{ tile.imgSrc | htmlSafe }}" />
(where 'tile.imgSrc' renders to a relative path link to the image - eg. 'assets/img/start_your_day_right.png'.
I've tried including various permutations of the img-src setting, including 'unsafe-inline', removing 'self', etc.
The error I can't seem to escape is:
screenshot of ffox console error
I'm running the latest version of FireFox (52.0) w/ an older version of angular (v1.5.5). I have seen that this older version of Angular may cause issues during the submission of the app to FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470), but I've seen no indication that this would be a factor w/ testing and the current error. (And I'm trying to solve this before I introduce any further errors w/ an Angular upgrade).
Any tips out there?
The issue here is that Angular sanitizes ng-src URLs for images and links.
Prepending unsafe: renders the link unusable, and signals that Angular does not recognize it as valid.
This is a known behavior in extensions:
Angular changes urls to "unsafe:" in extension page
ng-src doesn't work in Chrome app, even with ng-csp
As shown in the links above, this behavior can be overridden by patching $compileProvider's imgSrcSanitizationWhitelist and aHrefSanitizationWhitelist. Angular developers officially blessed this workaround and decided not to modify core Angular code for non-web use.
Since the extension you're porting is working in Chrome, it should already contain this patching. All you need to do is to add moz-extension: to the whitelist. Using the bugtracker's example, modified to work in both Chrome and Firefox:
var myModule = angular.module('myApp', [...], function($compileProvider) {
...
$compileProvider.imgSrcSanitizationWhitelist(
/^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\//
);
$compileProvider.aHrefSanitizationWhitelist(
/^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/
);
});
It should be similarly modified for other non-web platforms, i.e. for Edge or node-webkit.
I always use html5Mode true when using angular ui-router but for a project hosted on github pages, I can't activate this mode given that no server side redirection is possible. So lets go with uggly hashbangs # in URL ;)
My state
.state('app.root.elus', {
url : 'élus',
Displays in Chromium Browser URL bar :
/#/%C3%A9lus
But if I activate html5Mode, the URL displays correctly
/#/élus
In Firefox, in both modes, accents are correctly displayed ...
Would anybody have a beginning of explanation and solution ?
I've encountered a problem rendering Facebook canvas app on chrome - the app works fine in Firefox or outside of Facebook. The content is rendered using angular.js (1.2.9) which crashes while compiling the DOM.
This problem only occurs on the first request to the canvas app - if the page is reloaded (soft reload), everything works. I believe that for some reason angular starts compiling nodes while the page is still loading (stack trace and breakpoint images attached - https://imgur.com/a/iDpSc). Any thoughts? Thanks.
I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.