DEV Community: KAK

Hello!

KAK — Sat, 30 May 2020 13:58:17 +0000

Hello world, first timer here..

Ruby Roda Web Application Framework Post Request Params

KAK — Thu, 02 Apr 2020 17:43:00 +0000

There is difference when accessing the parameters data in Roda aplication between sending request withContent-Type: application/x-www-form-urlencoded and Content-Type: application/json.

When Sending POST Request with Content-Type: x-www-form-urlencoded

Use r.params['your_params'] to read your_params parameter value.

Example Request

curl -v -X POST --data "foobar=example_value" example.com/foo/bar

Example Roda Route

class Example
  route 'foo' do |r|
    r.post 'bar' do
      r.params['foobar'] # => example_value
    end
  end
end

When Sending POST Request with Content-Type: application/json

Use r.body.read to read the JSON body parameter and parse it with JSON parser.

Example Request

curl -v -X POST -H "Content-Type: application/json" -d '{"foobar":"example_value}' "example.com/foo/bar"

Example Roda Route

class Example
  route 'foo' do |r|
    r.post 'bar' do
      params = JSON.parse(r.body.read) # => {"foobar"=>"example_value"}
    end
  end
end

Native Javascript Ready Function and JSON with AJAX GET Request

KAK — Mon, 14 Oct 2019 23:50:00 +0000

I use You Might Not Need jQuery as reference when building something with Native Javascript.

In this post I write about example usage for ready function and JSON with AJAX GET request.For POST request, please see my previous Native Javascript AJAX POST Request with Data or Parameters.

The code below is ready function based on jQuery and Native Javascript.

// jQuery
$(document).ready(function(){
});


// Native JS, IE 9+
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

And the code below is JSON GET request based on jQuery and Native Javascript.

// jQuery
$.getJSON('/my/url', function(data) {
});


// Native JS, IE 10+
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
  } else {
    // We reached our target server, but it returned an error
  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

Example Usage

Suppose there’s HTML like this:

<div id="my-selector">
</div>

And JSON response like this:

{
  "example": {
    "foo": "bar"
  }
}

Here is example code how to insert HTML element from JSON response with Native Javascript.

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function() {
  var request = new XMLHttpRequest();
  request.open('GET', 'https://example.com', true);

  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      var element = document.getElementById('my-selector');

      if (data['example'] == null) {
        element.innerHTML = '<p>Empty resultt</p>';
      } else {
        element.innerHTML = '<p>'+ data['example']['foo']+'</p>';
      }
    } else {
      console.log('server error');
    }
  };

  request.onerror = function() {
    console.log('request error');
  };

  request.send();
});

Introducing Enkrip

KAK — Sun, 28 Oct 2018 11:43:00 +0000

Enkrip is Ruby gem to make your Active Record model seamlessly encrypt and decrypt your desired attributes.

Basically Enkrip just uses Active Record callbacks and ActiveSupport::MessageEncryptor for encryption and decryption.

See Enkrip Example Rails Application for demo.

Goals

Seamlessly encrypt and decrypt value for both string and numeric attribute
Compatible with Active Model validation
Automatically convert numeric attributes to desired format

Limitations

All attributes that are defined in numeric_attributes will be forced to use UTF-8 encoding
Enkrip requires Active Record 5.2 or newer
Does not compatible with activerecord-import

Installation

Add enkrip to your Rails app’s Gemfile and run bundle install:

gem 'enkrip'

Configuration

After installation, you need to define ENKRIP_LENGTH, ENKRIP_SALT, and ENKRIP_SECRET environment variables:

# example
export ENKRIP_LENGTH=32 # 32 is default value from ActiveSupport::MessageEncryptor.key_len
export ENKRIP_SALT=random_salt_with_length_32 # you can generate from SecureRandom.random_bytes(YOUR_ENKRIP_LENGTH)
export ENKRIP_SECRET=random_secret_with_length_32

Usage

Use text data type for encrypted attributes

# migration

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.text :my_string
      t.text :my_numeric

      t.timestamps
    end
  end
end

After run the migration, define you encrypted attributes

# Active Record model

class Post < ActiveRecord::Base
  include Enkrip::Model

  enkrip_configure do |config|
    config.string_attributes << :my_string
    config.numeric_attributes << :my_numeric
    config.purpose = :example # optional, default is nil
    config.convert_method_for_numeric_attribute = :to_f # optional, default is to_i
    config.default_value_if_numeric_attribute_blank = 0.0 # optional, default is 0
  end

  validates :my_numeric, numericality: { greater_than: 0 }
  validates :my_string, presence: true
end

You can check encrypted value from rails console with raw query

# Rails 5.2 console
post = Post.new => #<Post id: nil, my_string: nil, my_numeric: nil, created_at: nil, updated_at: nil>
post.valid? # => false
post.errors.full_messages # => ["My numeric must be greater than 0", "My string can't be blank"]

post.my_string = "aloha" # => "aloha"
post.my_numeric = 5 # => 5
post.save # => true

raw = ActiveRecord::Base.connection.exec_query 'SELECT my_string, my_numeric FROM posts limit 1'

raw.rows.first[raw.columns.find_index('my_string')]
# => "TUVQcnRBck5oYzMvRlRZUWR3Mzlzdz09LS1tZ09xNGNYbnkzdFc2d1duMEIrdUdBPT0=--ffae1f04753ca5c636915746a4c6fccf81897138"

raw.rows.first[raw.columns.find_index('my_numeric')]
# => "TkdSbURRNzVMbUF6MjF0bjI2ZEtmQT09LS1rRHhqQ2xpWGhYaHBoRlhCRnVZSmh3PT0=--74e45e6c96df78258a1731994a71a74c5047d655"

post.reload
post.my_string # => "aloha"
post.my_numeric # => 5

You can use Enkrip::Engine.encrypt and Enkrip::Engine.decrypt to encrypt and decrypt a value.

my_string = 'hello world'

encrypted_my_string = Enkrip::Engine.encrypt my_string
# => "MzZ1M0RDSWdQQ0VaRVJXT3NBYlVTWExWVnVSbXNBeXRMSC9wYWdoeW5Ddz0tLVNVT2l6NDJCd1ZxbW1lYnl2eC9PakE9PQ==--c7436c403595c18fef802a51be29f73d5bb73f19"

Enkrip::Engine.decrypt encrypted_my_string
# => "hello world"

License

Enkrip is released under the MIT License.

Native Javascript AJAX POST Request with Data or Parameters

KAK — Sun, 26 Aug 2018 22:54:00 +0000

If we don’t care about response from the server, native Javascript AJAX POST request with data / parameters is quite simple.

var request = new XMLHttpRequest();
request.open('POST', '/example', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

data variable is a body of data to be sent in the XHR request. This can be:

A Document, in which case it is serialized before being sent.
A BodyInit, which as per the Fetch spec can be a Blob, BufferSource, FormData, URLSearchParams, ReadableStream, or USVString object.

I’ve tried to send data with FormData object, but it’s not working with my Sinatra Application. So I use URLSearchParams to send the data.

Here is example of my native Javascript AJAX POST request with parameters.

var mydata = document.getElementById('mydata');
var myresponse = document.getElementById('myresponse');
var data = 'mydata=' + mydata.value;

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/mypath', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

request.onreadystatechange = function() {
  if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
    console.log('succeed');
    myresponse.value = request.responseText;
  } else {
    console.log('server error');
  }
};

request.onerror = function() {
  console.log('something went wrong');
};

request.send(data);

More Information: