I am using AngularJS to develop an Chinese website. I used ui-router to manage the URL links, and the params for the URL is in Chinese.
Here is the code, schoolName is an variable in controller, and the value is Chinese characters:
<a ui-sref="showSchools({name:schoolName})" > 查找</a>
The problem is it will generate URL like:
http://localhost:8080/#/showSchools?name=%E7%A6%8F%E5%BB%BA%E7%9C%81%E9%97%BD%E4%BE
But i want the link to be like:
http://localhost:8080/#/showSchools?name=第一中学
I tried encode param into utf8 with encodeUri filter: https://github.com/rubenv/angular-encode-uri, but it does not work.
Is there anybody know how to show Chinese characters in the URL?
This might be too late but I thought it might help.
I too had this same issue while trying to display chinese characters in the url while testing a angular app (with ui-router) with localhost.
The urls used to appear as below:
http://localhost:56066/#/map/%E6%B1%9F%E8%8B%8F
But as soon as I added the below line to clean up the url:
$locationProvider.hashPrefix('!').html5Mode(true);
The urls now appear as below (which is what I hoped they would look like):
http://localhost:56066/map/黑龙江
I haven't yet figured out why cleaning up the url helped!
Related
Is there any way to encode the uri in to prop of <Link> in react router.
my code:
<Link to={`info/${props.movie.Title}`}> info </Link>
I have tried encodeURI() but it does not work.
uri = encodeURI(`info/${props.movie.Title}`)
console.log(uri);
<Link to={uri}> info </Link>
Clicking on the link gives the url as "http://localhost:3000/info/Man of Steel" as opposed to "http://localhost:3000/info/Man%20of%20Steel".
Is there a way to get the latter?
Edit
React works perfectly. My bad. Firefox somehow doesn't encode spaces in URL bar. But other special characters get encoded. So my question changes to why are spaces not encoded by Firefox in the URL bar. I also noticed that copy pasting the link gives %20 instead of space.
Edit 2
Firefox decodes spaces and displays it in the URL bar as opposed to other browsers which display %20. Encoding is actually done in the background.
encodeURIComponent() and React works perfectly. The issue was that the latest version of Firefox doesn't show space as encoded. It is encoded. Copy pasting it gives %20. But it will be displayed as space in Firefox URL bar. Other browsers still give %20.
You don't have to use some random string in URL address. Instead of it you can use id of movie ( info/:id ) and then get movie by id and show to user. As the result you don't need to decode string because it is not reliable
My little application is written in reactjs, on a page it will update title / description based on the real object that user selected like this photo. The new title and description are display correctly but when sharing on fb, the values are not loaded correctly (the value is from old html templated) - go to facebook and paste the url or use fb debugger the values are from static html page.
Have anyone had this issue and have "fixed" it ?
Thanks for any recommendation !
Facebook ignores JavaScript, so dynamic OG tags are not possible. You can solve this with Server Side Rendering or https://prerender.io/, for example.
You can pass as parameter in url (abc.com?title=awesome&desc=flower), and in og tags use that parameter to make dynamic.
I am trying to beautify an angular site. The trailing hashtag is a pain and it is conflicting with how Spiders crawl the site. So basically domain.com/about is shown domain.com/#/about, but when spiders hit the non-hashtag version they get a 404. Long story short, I want the hashtag gone lol
I followed this SO Question and it got me pretty far by using the code below.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
I was able to get rid of the hashtag. But only on the home page. Any other page got even weirder.
Now the domain.com/#/about actually looks like domain.com/#%2Fabout.
Can anyone tell me how can simply get rid of the hashtag?
May be you have an anchor tag like this:
<a ng-href="#/about">About</a>
Replace #/ with /. So modified anchor tag should look like this:
<a ng-href="/about">About</a>
Hope this solve your problem. If it does not solve your problem, please add detail code. Without detail information, it is difficult to answer question.
The API I am using automatically escapes any strings from user inputs(as it should). I am having a real hard time finding the best way to unescape/sanitize the data to then use on my page. Is a directive a good route to go here?
Sample Response
<b>This is the response!</b><br><br><i>It comes in italic, too.</i>
Template
<div ng-bind-html="groupsDetailCtrl.group.information.text"></div>
<!-- Or pass in to directive? -->
<group-information content="groupsDetailCtrl.group.information.text"></group-information>
Currently Output on page is just something like this
<b>This is the response</b>
When of course it should be
This is the response
Is Angularjs takes care of XSS attack. I have read that ng-bind takes care. But When i try to do a sample to test that, it allows me to insert html tags in input type with ng-model...it didn't escape the Html tags.
I have lot of input element in our page, which binds with ng-model, what should I do to make sure if I input a html tags ,angular ignores the html/scrip tags.
ex.
<input id="name" ng-model="name"></input>
if I input as
'Hello, <b>World</b>!'
$scope.name contains the same what I entered ,didn't exclude the tags. i.e
var val = $scope.name;
console.log(val);
prints as same
'Hello, <b>World</b>!'
Please let me know how to solve this in angularjs.
thank
Look at here : http://docs.angularjs.org/api/ngSanitize/service/$sanitize
If you want escape use ng-bind, it ll render the tag without interpretation like that :
Hello <b>World</b> not like Hello World !
Do you understand ? so ng-bind is safe because it doesn't care about HTML tags.
If you want that your HTML tags be interpreted but safely just use ng-bind-html !
For example if you want to display this string :
'Hello <b>World</b><input type="text" />'
The result will be : Hello World but without the input because AngularJS compiler uses $sanitize service and check a whitelist of HTML elements and an iput is not authorized.
Maybe ng-bind-html is what you're looking for.
If you just want be sure that the user can't put html tags in your input just use the directive ng-pattern on your inputs !
http://docs.angularjs.org/api/ng/directive/input
It takes a regex for allowed characters in your input !
Hope it helps !
I don't believe that AngularJS has default whitelist input validation, which is what your test exercises. So a user can pretty much input anything they like. This is not surprising - whitelists are very domain specific, and Angular is a framework designed for a wide range of domains.
The main defense against XSS is to properly encode all untrusted data (see https://www.owasp.org/index.php/Top_10_2013-A3-Cross-Site_Scripting_(XSS)). This, Angular does by default.
Bottom line is that AngularJS is intended to be secure from XSS by default, no special action required. You can verify some basic scenarios by trying to output what you input into a view using the normal {{scopevariable}} notation.
I did find a detailed analysis of AngularJS XSS vulnerability: https://code.google.com/p/mustache-security/wiki/AngularJS. At the end of the comments, there is a link to a google doc with further discussion and response from the angular team.