<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JavaScript &#8211; Otricks.com</title>
	<atom:link href="https://otricks.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>https://otricks.com</link>
	<description>It&#039;s the big &#039;O&#039; in technology</description>
	<lastBuildDate>Sat, 27 Jun 2020 11:18:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.1</generator>
	<item>
		<title>How to delete MySQL binlog files if you don&#8217;t have disk space left</title>
		<link>https://otricks.com/how-to-delete-mysql-binlog-files-if-you-dont-have-disk-space-left/</link>
		
		<dc:creator><![CDATA[Anjum Nawab]]></dc:creator>
		<pubDate>Thu, 23 Apr 2020 05:47:40 +0000</pubDate>
				<category><![CDATA[Server]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">https://otricks.com/?p=2351</guid>

					<description><![CDATA[<p>MySql does some really stupid stuff, often I feel like it&#8217;s no MY-SQL it SOMEONE-ELSE-SQL. Maybe it has some valid reasoning behind it, which I&#46;&#46;&#46;</p>
<p>The post <a rel="nofollow" href="https://otricks.com/how-to-delete-mysql-binlog-files-if-you-dont-have-disk-space-left/">How to delete MySQL binlog files if you don&#8217;t have disk space left</a> appeared first on <a rel="nofollow" href="https://otricks.com">Otricks.com</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>MySql does some really stupid stuff, often I feel like it&#8217;s no MY-SQL it SOMEONE-ELSE-SQL. Maybe it has some valid reasoning behind it, which I don&#8217;t know completely yet. One issue which often people encountered is  MySql binlog files.</p>



<p>These binlog files are very storage-intensive, most of the time for a small application each binlog file will be around 1.2GB.</p>



<p>Now imagine if you have 20GB disk-space it will eat up pretty much everything to the point where not a single kb is remaining for the server, if such thing happens, we even can&#8217;t run small commands like opening a file or editing a file etcetera.</p>



<p>As you can see in below image where It uses 100% of disk space 🙁  </p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="531" src="https://otricks.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-23-at-9.03.10-1024x531.png" alt="" class="wp-image-2352" srcset="https://otricks.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-23-at-9.03.10-1024x531.png 1024w, https://otricks.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-23-at-9.03.10-300x156.png 300w, https://otricks.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-23-at-9.03.10-768x398.png 768w, https://otricks.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-23-at-9.03.10.png 1072w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Some blog suggested that we can delete those files using <code>myql></code> in terminal, however if you don&#8217;t have any space left we can&#8217;t even run <code>sql</code> in terminal.</p>



<h2 class="wp-block-heading">The right way to remove binlog files.</h2>



<p>If you are a root user to the system you can do following things to get it deleted in proper way.</p>



<p>login to the system via ssh and run below command, it will make you root user.</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">sudo -su</pre></div>



<p>Run <code>df -h</code> to check current disk space information, it will show you something like below. check <code>/dev/xvda1</code> section it consume all the space which I have it 🙁</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">Filesystem      Size  Used Avail Use% Mounted on
udev            236M     0  236M   0% /dev
tmpfs            49M  5.7M   44M  12% /run
/dev/xvda1       20G   20G     0 100% /
tmpfs           244M     0  244M   0% /dev/shm
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs           244M     0  244M   0% /sys/fs/cgroup
/dev/loop0       92M   92M     0 100% /snap/core/8689
/dev/loop1       18M   18M     0 100% /snap/amazon-ssm-agent/1480
/dev/loop2       18M   18M     0 100% /snap/amazon-ssm-agent/1566
/dev/loop4       94M   94M     0 100% /snap/core/8935
tmpfs            49M     0   49M   0% /run/user/1000</pre></div>



<p>To get more information about your database usage you can run du -hs <code>/opt/bitnami/mysql/data</code> for me, it&#8217;s 16 bg, which is way too much for small application.</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">16G	/opt/bitnami/mysql/data</pre></div>



<p>To check all the big files (in space allocation) run below command, it will show list of culprits </p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">du -hs /opt/bitnami/*/*/* |sort -rh | head -35</pre></div>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">1.1G	/opt/bitnami/mysql/data/binlog.000017
1.1G	/opt/bitnami/mysql/data/binlog.000016
1.1G	/opt/bitnami/mysql/data/binlog.000015
1.1G	/opt/bitnami/mysql/data/binlog.000014
1.1G	/opt/bitnami/mysql/data/binlog.000013
1.1G	/opt/bitnami/mysql/data/binlog.000012
1.1G	/opt/bitnami/mysql/data/binlog.000011
1.1G	/opt/bitnami/mysql/data/binlog.000010
1.1G	/opt/bitnami/mysql/data/binlog.000009
1.1G	/opt/bitnami/mysql/data/binlog.000008
1.1G	/opt/bitnami/mysql/data/binlog.000007
1.1G	/opt/bitnami/mysql/data/binlog.000006
1.1G	/opt/bitnami/mysql/data/binlog.000003
1.0G	/opt/bitnami/mysql/data/binlog.000018
569M	/opt/bitnami/mysql/data/binlog.000004</pre></div>



<p>At this point you even can&#8217;t open file via <code>nano etc.txt</code> or preform any other operation in the system as no space is left.</p>



<p>You can delete <code>binlog.000001</code> to get some space, run <code>rm binlog.000001</code> once it&#8217;s deleted  you will be able to run <code>nano</code> command.</p>



<p>Now open binlog.index file using  <code>nano binlog.index</code> and remove all the entries of binlog.0xxx from binlog.index file, once done save it and exit.</p>



<p>Run below to remove all fu(king binlog files at once, if you want you can remove <code>mysqld.log</code> files to as it might not be any use. </p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">rm binlog.00*</pre></div>



<p>After this if you run <code>df -h</code> you will get your space back. check <code>/dev/xvda1</code> section 🙂</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">Filesystem      Size  Used Avail Use% Mounted on
udev            236M     0  236M   0% /dev
tmpfs            49M  5.7M   44M  12% /run
/dev/xvda1       20G  4.4G   15G  23% /
tmpfs           244M     0  244M   0% /dev/shm
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs           244M     0  244M   0% /sys/fs/cgroup
/dev/loop0       92M   92M     0 100% /snap/core/8689
/dev/loop1       18M   18M     0 100% /snap/amazon-ssm-agent/1480
/dev/loop2       18M   18M     0 100% /snap/amazon-ssm-agent/1566
/dev/loop4       94M   94M     0 100% /snap/core/8935
tmpfs            49M     0   49M   0% /run/user/1000</pre></div>



<p>Hope this will be helpful to someone.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p> I go beyond boundaries that trap me. Attachments and limitations in thinking are removed and I see people as actors playing roles sometimes negative and sometimes positive and scenes as passing phases, sometimes negative and sometimes positive. This experience translates into power in the consciousness as well as in words and actions.</p></blockquote>



<p>You may check other informative article  https://otricks.com/responsiveness-in-reactive-programming/ </p>
<p>The post <a rel="nofollow" href="https://otricks.com/how-to-delete-mysql-binlog-files-if-you-dont-have-disk-space-left/">How to delete MySQL binlog files if you don&#8217;t have disk space left</a> appeared first on <a rel="nofollow" href="https://otricks.com">Otricks.com</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>How to implement SSL Pinning in Ionic 5?</title>
		<link>https://otricks.com/how-to-implement-ssl-pinning-in-ionic-5-or-html5-app/</link>
		
		<dc:creator><![CDATA[Anjum Nawab]]></dc:creator>
		<pubDate>Thu, 26 Mar 2020 20:08:04 +0000</pubDate>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Mobile Apps]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">https://otricks.com/?p=2135</guid>

					<description><![CDATA[<p>When we develop ionic or HTML5 hybrid application often we ignore some of the goofy security stuff, however, when a client wants to do security&#46;&#46;&#46;</p>
<p>The post <a rel="nofollow" href="https://otricks.com/how-to-implement-ssl-pinning-in-ionic-5-or-html5-app/">How to implement SSL Pinning in Ionic 5?</a> appeared first on <a rel="nofollow" href="https://otricks.com">Otricks.com</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>When we develop ionic or HTML5 hybrid application often we ignore some of the goofy security stuff, however, when a client wants to do security testing checkup, we need to implement many things which we really don&#8217;t care at the time of development, one of such thing is <a rel="noreferrer noopener" aria-label="SSL Pinning (opens in a new tab)" href="https://en.wikipedia.org/wiki/HTTP_Public_Key_Pinning" target="_blank">SSL Pinning</a> </p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>The pinning is an optional mechanism that can be used to improve the security of a service or site that relies on SSL Certificates. Pinning allows you to specify a cryptographic identity that should be accepted by users visiting your website </p></blockquote>



<p>It&#8217;s a two-part process, first, we need to get a certificate from our API server where we host our backend services. second,  we will need to implement SSL Pinning in the ionic app. Without further ado, let&#8217;s start the first part: </p>



<h2 class="wp-block-heading">Step 1: Get the SSL Certificate from API Server.</h2>



<p>Let&#8217;s pretend that our API server is <a rel="noreferrer noopener" aria-label="otricks.com (opens in a new tab)" href="https://otricks.com/" target="_blank">otricks.com</a> we can get an SSL certificate for the same, I will show you a very easy way to get it via <a rel="noreferrer noopener" aria-label="Firefox (opens in a new tab)" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a> browser.</p>



<p>Go to otricks.com or your API endpoint with https </p>



<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="474" src="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.03-1024x474.png" alt="" class="wp-image-2138" srcset="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.03-1024x474.png 1024w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.03-300x139.png 300w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.03-768x355.png 768w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.03-1536x711.png 1536w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.03.png 1906w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large border: 1px solid #ddd"><img decoding="async" width="1024" height="597" src="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.28-1024x597.png" alt="" class="wp-image-2139" srcset="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.28-1024x597.png 1024w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.28-300x175.png 300w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.28-768x448.png 768w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.28-1536x896.png 1536w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.28.png 1914w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="743" src="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.42-1024x743.png" alt="" class="wp-image-2140" srcset="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.42-1024x743.png 1024w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.42-300x218.png 300w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.42-768x557.png 768w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.42-1536x1114.png 1536w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-19.20.42-2048x1485.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>When you click on PEM(cert), it will download <strong><em>otricks-com.pem</em></strong> file which you can convert it to <strong><em>filename.cer</em></strong>  file extension. You need to have <a rel="noreferrer noopener" aria-label="OpenSSL (opens in a new tab)" href="https://www.openssl.org/" target="_blank">OpenSSL</a> tool install in your machine, I have it already in my Macbook Pro. You can google it and install it.</p>



<p>Open a terminal window and run below command which will convert <code>.pem</code> a file to <code>.cer</code> file, change &#8220;nameOfPemFile.pem &#8221; with your file and adjust the path accordingly. Once you run below command it will convert your <strong><em><code>pem</code></em></strong> file to <strong><em><code>cer</code></em></strong> file which we need for our next step.</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><div style="position:absolute;top:-20px;right:0px;cursor:pointer" class="copy-simple-code-block"><svg aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" class="dashicon dashicons-admin-page"><path d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path></svg></div><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="true">openssl x509 -inform PEM -in /Users/anjum/Downloads/nameOfPemFile.pem -outform DER -out /Users/anjum/Downloads/certificate.cer
</pre></div>



<h2 class="wp-block-heading">Step 2: Create a new Ionic 5 project.</h2>



<p>Let&#8217;s create a new empty project with the Ionic CLI tool</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><div style="position:absolute;top:-20px;right:0px;cursor:pointer" class="copy-simple-code-block"><svg aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" class="dashicon dashicons-admin-page"><path d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path></svg></div><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="powershell" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="true">ionic start sslpinning tabs
</pre></div>



<p>Open the project and edit the angular.json file add certificates block something like below. check app =&gt; architect =&gt; build =&gt; assets section.  This way Angular will copy our <code>certificates</code> inside <code>www</code> folder of ionic when we build project</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><div style="position:absolute;top:-20px;right:0px;cursor:pointer" class="copy-simple-code-block"><svg aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" class="dashicon dashicons-admin-page"><path d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path></svg></div><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="json" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="true">{
    "glob": "**/*",
    "input": "src/certificates",
    "output": "certificates"
},</pre></div>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="json" data-theme="monokai" data-fontsize="14" data-lines="10" data-showlines="true" data-copy="false">{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*",
                "input": "src/certificates",
                "output": "certificates"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}
</pre></div>



<p>Let&#8217;s make <code>certificates</code> folder inside <code>src</code> folder and copy your .cer file inside it. please check the screenshot below for the folder structure.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="485" height="1024" src="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.04.06-485x1024.png" alt="" class="wp-image-2157" srcset="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.04.06-485x1024.png 485w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.04.06-142x300.png 142w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.04.06.png 648w" sizes="auto, (max-width: 485px) 100vw, 485px" /></figure>



<p>Now open the terminal and run <code>ionic cordova platform add android</code> to add an android platform. It will generate all related files and folders for android. Open the file <code>config.xml</code> and add below code inside the platform block.</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><div style="position:absolute;top:-20px;right:0px;cursor:pointer" class="copy-simple-code-block"><svg aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" class="dashicon dashicons-admin-page"><path d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path></svg></div><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="xml" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="true">&lt;platform name="android">
     &lt;!-- other tags will be here  -->
    &lt;resource-file src="src/certificates/certificate.cer" target="src/certificates/certificate.cer" />
&lt;/platform></pre></div>



<p>Next, we need to include the Cordova plugin for SSL Pinning, for that we will use <a rel="noreferrer noopener" href="https://github.com/silkimen/cordova-plugin-advanced-http" target="_blank">https://github.com/silkimen/cordova-plugin-advanced-http</a> plugin which is great.  Run below commands in the terminal to install the plugin in the project and we will also need ionic native too.</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><div style="position:absolute;top:-20px;right:0px;cursor:pointer" class="copy-simple-code-block"><svg aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" class="dashicon dashicons-admin-page"><path d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path></svg></div><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="sh" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="true">ionic cordova plugin add cordova-plugin-advanced-http

npm install @ionic-native/http
</pre></div>



<p>Once done open <code>app.component.ts</code> file and add code inside <code>initializeApp()</code> function check below file </p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="typescript" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

 
import { HTTP } from '@ionic-native/http/ngx'; //&lt;=== Import this 

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private httpSSL: HTTP //&lt;=== define this too
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.platform.ready() 
      .then(() => {
          
          
        this.httpSSL.setServerTrustMode("pinned") //&lt;=== Add this function 
          .then(() => {
              console.log("Congratulaions, you have set up SSL Pinning.")
          })
          .catch(() => {
              console.error("Opss, SSL pinning failed.")
          });
          
          
      })

    });
  }
}
</pre></div>



<p>Now create new service folder to keep all our http service at one place something like below and create <code>api.service.ts</code> file </p>



<figure class="wp-block-image size-medium"><img loading="lazy" decoding="async" width="300" height="138" src="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.29.54-300x138.png" alt="" class="wp-image-2160" srcset="https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.29.54-300x138.png 300w, https://otricks.com/wp-content/uploads/2020/03/Screen-Shot-2020-03-26-at-23.29.54.png 578w" sizes="auto, (max-width: 300px) 100vw, 300px" /></figure>



<p><code>api.service.ts</code></p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="typescript" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http/ngx';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
    
    readonly  apiEndPoint = 'https://otricks.com/api/user';
    readonly  fakeEndPoint = 'http://www.google.com/api/xyz'
    
    // This will get work with SSL Pinning becuase API endpoint is same as our certificate 
    getDataFromActualAPi(){
        return this.http.get(`apiEndPoint`,{}, {});
    }
    
    
    // This call will be fail as the domain is not correct according to our certificate.
    getDataFromFakeApi(){
        return this.http.get(`fakeEndPoint`,{}, {});
    }

}</pre></div>



<p></p>



<p>When you call this API service in the component <code>getDataFromActualAPi()</code> will return your correct response, however, if you try to call <code>getDataFromFakeApi()</code> the function will fail as the provided certificate is not from this domain.</p>



<p>The system will throw below error message, you can check in the debugger console.</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="javascript" data-theme="monokai" data-fontsize="14" data-lines="Infinity" data-showlines="true" data-copy="false">{status: -2, error: "TLS connection could not be established: javax.net…n: Trust anchor for certification path not found."}
error: "TLS connection could not be established: javax.net.ssl.SSLHandshakeException: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found."
status: -2
}</pre></div>



<p>Hope this will help someone 🙂  if you like this article you may want to check how to <a href="https://otricks.com/how-to-secure-your-ubuntu-server-from-brute-force-attacks/">protect your server </a></p>





<p></p>
<p>The post <a rel="nofollow" href="https://otricks.com/how-to-implement-ssl-pinning-in-ionic-5-or-html5-app/">How to implement SSL Pinning in Ionic 5?</a> appeared first on <a rel="nofollow" href="https://otricks.com">Otricks.com</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Manage Multiple version of Node in a single machine</title>
		<link>https://otricks.com/manage-multiple-version-of-node-in-a-single-machine/</link>
		
		<dc:creator><![CDATA[Anjum Nawab]]></dc:creator>
		<pubDate>Fri, 06 Mar 2020 13:32:07 +0000</pubDate>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Nodejs]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[nodejs]]></category>
		<category><![CDATA[Tips]]></category>
		<guid isPermaLink="false">https://otricks.com/?p=2049</guid>

					<description><![CDATA[<p>When we start using node.js as our primary framework for writing multiple applications, Over the time it will be really pain in the neck, to&#46;&#46;&#46;</p>
<p>The post <a rel="nofollow" href="https://otricks.com/manage-multiple-version-of-node-in-a-single-machine/">Manage Multiple version of Node in a single machine</a> appeared first on <a rel="nofollow" href="https://otricks.com">Otricks.com</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>When we start using node.js as our primary framework for writing multiple applications, Over the time it will be really pain in the neck, to manage older projects or projects with different node versions. </p>



<p>While working on angularjs to angualr 9 or ionic to ionic 5, I have a variety of node versions in different projects. Node community has also faced similar problems, to rescue there is a package to manage different versions of the node in a single computer, without uninstalling or re-installing your required version.</p>



<p>  You can install <a href="https://github.com/nvm-sh/nvm" class="rank-math-link">https://github.com/nvm-sh/nvm</a> in your computer to manage node</p>



<p>Once install its very easy to change your desire node version. To download, compile, and install the latest release of the node, do this:</p>



<div style="height: 250px; position:relative; margin-bottom: 50px;" class="wp-block-simple-code-block-ace"><div style="position:absolute;top:-20px;right:0px;cursor:pointer" class="copy-simple-code-block"><svg aria-hidden="true" role="img" focusable="false" class="dashicon dashicons-admin-page" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20"><path d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path></svg></div><pre class="wp-block-simple-code-block-ace" style="position:absolute;top:0;right:0;bottom:0;left:0" data-mode="javascript" data-theme="monokai" data-fontsize="12" data-lines="Infinity" data-showlines="true" data-copy="true">nvm install node # "node" is an alias for the latest version</pre></div>
<p>The post <a rel="nofollow" href="https://otricks.com/manage-multiple-version-of-node-in-a-single-machine/">Manage Multiple version of Node in a single machine</a> appeared first on <a rel="nofollow" href="https://otricks.com">Otricks.com</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
