Ionic and Angular are great frameworks for building single page web apps. If you want to create an app that you can then deploy on almost any mobile device out there based on HTML5 and Javascript (JS), then you are starting in a good place.
If you are just building an app that does not communicate to other websites and deals only with information stored locally or already on the app, then you will have no issues. What the guides do not explain well is all the issues you will have communicating with other websites. These are JS features (or limitations) that protect users from malicious js code. Native Android (dalvik) and iOS (Objective-C/Swift) apps do not have that limitations, so native developers may be unfamiliar with these restrictions.
This article will help you identify and solve some common pitfalls when building an ionic app. The source code to the sample ionic app is available on github.
If you are communicating to another server, you will need to set it up to allow for Cross-Origin Resouce Shared (CORS) access or JS will not be able to read the responses. If the server you want to talk to is not your own and does not have Access-Control-Allow-Origin in its response headers set to where you need it (generally '*' or 'file://'), then you'll need to find a different way such as a proxy or a native app.
In Apache's httpd.conf file, you will need something like this on the directory you want to allow access to:
Newer versions of Ionic projects seem to have this enabled by default, but if you do not have the whitelist plugin already, you will need to install it.
Check if the whitelist plugin is installed:
If not, install it:
When you do an app build, a platforms/ios/{app_name}/{app_name}-Info.plist file is created. If your app ONLY accesses HTTPS, you won't need to set this. Otherwise add the bolded lines to the file:
The sample project uses the Angular $http service to communicate to a sample website. I use http://espn.go.com as an example because they send an Access-Control-Allow-Origin = '*' and allows us to test our app. You can see the response in the Message section and any errors in the Error section.
Getting an app running in the Apple App Store has its own set of challenges. Check out these Ionic iOS App Publishing tips: Publishing an Ionic Angular App for iOS - The Hidden Steps & Pitfalls.
According to the spec you can't have Allow Origin = "*" and Allow Credentials set to "true". There is a really good reason for this. It prevents malicious Javascript from using your credentials saved in cookies against you. Say you logged into a website and it knows who you are through a cookie. If in another window you ran some malicious JS code and both of these settings were enabled, the JS code could look like a logged in user to the remote server. Not so bad if it is a sports website, but horrendous if it is your banking site. With all that said there is a way to do this in Apache. Just echo the given origin back to the user. The browser never sees it as Allow Origin=* so it allows the request.
This code in your httpd.conf completely exposes your users to malicious JS code:
<Directory "/somedir">
SetEnvIf Origin "^(.*)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
Header set Access-Control-Allow-Credentials "true"
If you are just building an app that does not communicate to other websites and deals only with information stored locally or already on the app, then you will have no issues. What the guides do not explain well is all the issues you will have communicating with other websites. These are JS features (or limitations) that protect users from malicious js code. Native Android (dalvik) and iOS (Objective-C/Swift) apps do not have that limitations, so native developers may be unfamiliar with these restrictions.
This article will help you identify and solve some common pitfalls when building an ionic app. The source code to the sample ionic app is available on github.
![]() |
Typical architecture for an Ionic App as a web site front-end. |
Make sure your server allows remote access by Javascript:
If you are communicating to another server, you will need to set it up to allow for Cross-Origin Resouce Shared (CORS) access or JS will not be able to read the responses. If the server you want to talk to is not your own and does not have Access-Control-Allow-Origin in its response headers set to where you need it (generally '*' or 'file://'), then you'll need to find a different way such as a proxy or a native app.
In Apache's httpd.conf file, you will need something like this on the directory you want to allow access to:
<Directory "/your_www_dir">Or this can be done in your host language. For PHP:
#You may prefer "file://" instead of "*" because it is more restrictive
Header set Access-Control-Allow-Origin "*"
...
//When testing app locally, it will be run from localhost:8100
$client_origin = "";
if (array_key_exists('HTTP_ORIGIN', $_SERVER)) {
$client_origin = $_SERVER['HTTP_ORIGIN'];
}
if (stristr($client_origin, 'localhost') !== false) {
$origin = "http://localhost:8100"; //test host
} else {
$origin = "file://";
}//Allow only from two specific locations: testing, and from JS app
header("Access-Control-Allow-Origin: $origin");//To be less restrictive, you can use this line below
//header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
Make sure your Ionic project has whitelists enabled and configured:
Newer versions of Ionic projects seem to have this enabled by default, but if you do not have the whitelist plugin already, you will need to install it.
Check if the whitelist plugin is installed:
$ ionic plugin list
cordova-plugin-console 1.0.2 "Console"
...
cordova-plugin-whitelist 1.2.0 "Whitelist"
If not, install it:
$ ionic plugin add https://github.com/apache/cordova-plugin-whitelist.gitConfigure the app's config.xml file to allow access to outside sites (i.e. beyond 'file://'), add after <content src="index.html"/>. Add the last two lines to allow Android/iOS apps to open sites other than you own (if desired):
<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>
For iOS apps, check your App Transport Security (ATS) settings:
When you do an app build, a platforms/ios/{app_name}/{app_name}-Info.plist file is created. If your app ONLY accesses HTTPS, you won't need to set this. Otherwise add the bolded lines to the file:
<?xml version="1.0" encoding="UTF-8"?>If this is not set, you may have communication issues and see the following error:
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs$
<plist version="1.0">
<dict>
...
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</dict>
</plist>
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.
Load your code or try the sample project:
The sample project uses the Angular $http service to communicate to a sample website. I use http://espn.go.com as an example because they send an Access-Control-Allow-Origin = '*' and allows us to test our app. You can see the response in the Message section and any errors in the Error section.
iOS app publishing tips
Getting an app running in the Apple App Store has its own set of challenges. Check out these Ionic iOS App Publishing tips: Publishing an Ionic Angular App for iOS - The Hidden Steps & Pitfalls.
Something you should never ever do - have Allow Origin set to * and Allow Credentials to true
According to the spec you can't have Allow Origin = "*" and Allow Credentials set to "true". There is a really good reason for this. It prevents malicious Javascript from using your credentials saved in cookies against you. Say you logged into a website and it knows who you are through a cookie. If in another window you ran some malicious JS code and both of these settings were enabled, the JS code could look like a logged in user to the remote server. Not so bad if it is a sports website, but horrendous if it is your banking site. With all that said there is a way to do this in Apache. Just echo the given origin back to the user. The browser never sees it as Allow Origin=* so it allows the request.
This code in your httpd.conf completely exposes your users to malicious JS code:
<Directory "/somedir">
SetEnvIf Origin "^(.*)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
Header set Access-Control-Allow-Credentials "true"
The innovative thinking of you in this blog. This blog makes me very useful to learn. I like the information. Good work and keep update more.
ReplyDeleteLoadRunner Training in Chennai
QTP Training in Chennai
core java training in chennai
clinical sas training in chennai
javascript training in chennai
Spring Training in Chennai
Hibernate Training in Chennai
Manual Testing Training in Chennai
JMeter Training in Chennai
IEEE Final Year projects Project Center in Chennai are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes. Final Year Project Domains for IT
DeleteJavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, project projects for cse. Angular Training
I would definitely thank the admin of this blog for sharing this information with us. Waiting for more updates from this blog admin.
ReplyDeleteRPA Training in Chennai
Robotic Process Automation Certification
Blue Prism Training Institute in Chennai
UiPath Training in Chennai
DevOps Training in Chennai
Data Science Course in Chennai
Robotic Process Automation Training
RPA course in Chennai
RPA course in Chennai
Such an amazing blog with new updates. I love to learn more about this topic. Waiting for more like this.
ReplyDeleteAngularJS Training in Chennai
AngularJS course in Chennai
Angular 6 Training in Chennai
ReactJS Training in Chennai
Web Designing course in Chennai
Salesforce Training in Chennai
ccna course in Chennai
Ethical Hacking course in Chennai
AngularJS Training in Velachery
AngularJS Training in Anna Nagar
hanks for your efforts in sharing this information in detail. This was very helpful to me. kindly keep continuing the great work.
ReplyDeleteSpoken English Classes in Chennai
Best Spoken English Classes in Chennai
Spoken English Class in Chennai
Spoken English in Chennai
English Speaking Classes in Mumbai
English Speaking Course in Mumbai
IELTS Coaching in Chennai
IELTS Coaching Centre in Chennai
IELTS Classes in Mumbai
IELTS Coaching in Mumbai
This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.
ReplyDeletewebsite builder for reseller
Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.
ReplyDeleteprivate label website builder
Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.
ReplyDeletewhite label website builder
I really loved reading your blog. It was very well authored and easy to understand. Unlike other blogs I have read which are really not that good. Thank you a lot! and if you need App development company then contact us!
ReplyDeleteThe article is so informative. This is more helpful for our
ReplyDeleteselenium training in chennai
selenium online courses best selenium online training
selenium testing training
selenium classes
Thanks for sharing.
This is the first & best article to make me satisfied by presenting good content. I feel so happy and delighted. Thank you so much for this article.
ReplyDeleteLearn Best Digital Marketing Course in Chennai
Digital Marketing Course Training with Placement in Chennai
Best Big Data Course Training with Placement in Chennai
Big Data Analytics and Hadoop Course Training in Chennai
Best Data Science Course Training with Placement in Chennai
Data Science Online Certification Course Training in Chennai
Learn Best Android Development Course Training Institute in Chennai
Android Application Development Programming Course Training in Chennai
Learn Best AngularJS 4 Course Online Training and Placement Institute in Chennai
Learn Digital Marketing Course Training in Chennai
Digital Marketing Training with Placement Institute in Chennai
Learn Seo Course Training Institute in Chennai
Learn Social Media Marketing Training with Placement Institute in Chennai
Thanks to the author for writing this kind of post. I work for a top software house in Karachi and will definitely share this post to my colleagues.
ReplyDeleteSuch a great blog.Thanks for sharing.........
ReplyDeleteEthical Hacking Course in Chennai
Ethical hacking course in bangalore
Ethical hacking course in coimbatore
Ethical Hacking Training in Bangalore
Ethical hacking Training institute in bangalore
Ethical Hacking in Bangalore
Hacking Course in Bangalore
Ethical Hacking institute in Bangalore
Selenium Training in Bangalore
Software Testing course in Bangalore
Wonderful Post!!! Thanks for sharing this great blog with us.
ReplyDeleteAndroid Training in Chennai
app development course in chennai
Android Training Institute in Chennai
Android training
Android Training in Velachery
Android training in Adyar
Python Training in Chennai
Software testing training in chennai
JAVA Training in Chennai
Nice blog! Thanks for sharing this valuable information
ReplyDeleteBest IELTS Coaching in Bangalore
IELTS Training in Bangalore
IELTS Coaching centre in Chennai
IELTS Classes in Bangalore
IELTS Coaching in Bangalore
IELTS Coaching centre in coimbatore
IELTS Coaching in madurai
IELTS Coaching in Hyderabad
Selenium Training in Chennai
Ethical hacking course in bangalore
Thanks for giving excellent Message.Waiting for next article
ReplyDeleteHtml5 Training in Chennai
Html training in chennai
html course in chennai
html5 training in vadapalani
Html5 Training in Velachery
DOT NET Training in Chennai
core java training in chennai
Hibernate Training in Chennai
Mobile Testing Training in Chennai
SAS Training in Chennai
Very nice post with lots of information. Thanks for sharing these updates.
ReplyDeleteAngular Training in hyderabad
Angularjs Training in Bangalore
angular training in bangalore
Angularjs course in Chennai
angular course in bangalore
angularjs training institute in bangalore
salesforce course in bangalore
Big Data Training in Coimbatore
best angularjs training in bangalore
angularjs training in marathahalli
Good blog!!! It is more impressive... thanks for sharing with us...
ReplyDeleteSelenium Training in Chennai
best selenium training in chennai
selenium classes in chennai
best selenium training in chennai
Selenium training in Adyar
Selenium Training in Tnagar
Big data training in chennai
Hadoop training in chennai
Digital Marketing Course in Chennai
JAVA Training in Chennai
It is actually a great and helpful piece of information. I am satisfied that you simply shared this helpful information with us. Please stay us informed like this. Thanks for sharing.
ReplyDeleteDigital Marketing Training Course in Chennai | Digital Marketing Training Course in Anna Nagar | Digital Marketing Training Course in OMR | Digital Marketing Training Course in Porur | Digital Marketing Training Course in Tambaram | Digital Marketing Training Course in Velachery
Admire this blog. Keep sharing more updates like this
ReplyDeleteSpoken English & Communication Coaching Classes Training in Chennai | Certification | Online Courses
German Classes in Chennai | Certification | Language Learning Online Courses | GRE Coaching Classes in Chennai | Certification | Language Learning Online Courses | TOEFL Coaching in Chennai | Certification | Language Learning Online Courses | Spoken English Classes in Chennai | Certification | Communication Skills Training
Great information, nice to read your blog. Keep updating.
ReplyDeletepositive effects of social media
applications of artificial intelligence
ai applications
what is php used for in web design
rpa uipath jobs
salesforce interview questions for experienced