{"id":242529,"date":"2026-02-03T10:33:32","date_gmt":"2026-02-03T10:33:32","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/crypto-wpro\/"},"modified":"2026-02-03T10:32:20","modified_gmt":"2026-02-03T10:32:20","slug":"sign-documents-with-crypto-pro","status":"publish","type":"plugin","link":"https:\/\/fr.wordpress.org\/plugins\/sign-documents-with-crypto-pro\/","author":15730332,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"trunk","tested":"6.9.4","requires":"5.7","requires_php":"8.0","requires_plugins":null,"header_name":"Sign Documents with Crypto Pro","header_author":"YCode","header_description":"Plugin to create cms signature for DOM element with crypto pro plugin (Russian GOST).","assets_banners_color":"7e99ab","last_updated":"2026-02-03 10:32:20","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/yiv-dev\/sdcp_","header_author_uri":"https:\/\/github.com\/yiv-dev","rating":0,"author_block_rating":0,"active_installs":0,"downloads":251,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"enkydo","date":"2026-02-03 10:32:20"}},"upgrade_notice":{"1.0":"<ul>\n<li>Initial release.<\/li>\n<\/ul>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3452764,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3452764,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3452764,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3452764,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"A screenshot of the signing form."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[21057,255132,129421,723],"plugin_category":[],"plugin_contributors":[255133],"plugin_business_model":[],"class_list":["post-242529","plugin","type-plugin","status-publish","hentry","plugin_tags-crypto","plugin_tags-crypto-pro","plugin_tags-gost","plugin_tags-signature","plugin_contributors-enkydo","plugin_committers-enkydo"],"banners":{"banner":"https:\/\/ps.w.org\/sign-documents-with-crypto-pro\/assets\/banner-772x250.png?rev=3452764","banner_2x":"https:\/\/ps.w.org\/sign-documents-with-crypto-pro\/assets\/banner-1544x500.png?rev=3452764","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/sign-documents-with-crypto-pro\/assets\/icon-128x128.png?rev=3452764","icon_2x":"https:\/\/ps.w.org\/sign-documents-with-crypto-pro\/assets\/icon-256x256.png?rev=3452764","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>This plugin allows you to sign HTML DOM element content with CryptoPro GOST certificates.\nElement content will be converted to PDF and signed by selected cretificate.\nPlugin uses https:\/\/www.npmjs.com\/package\/crypto-pro-actual-cades-plugin#api-cryptopro lib<\/p>\n\n<h3>JavaScript Libraries<\/h3>\n\n<p>This plugin uses the following JavaScript libraries:<\/p>\n\n<ul>\n<li>jsPDF v4.0.0 - https:\/\/github.com\/parallax\/jsPDF\nA library to generate PDFs in JavaScript<\/li>\n<\/ul>\n\n<p>Source JavaScript files are located in the <code>js<\/code> folder. Plugin scripts are built with Vite; the configuration is in <code>vite.config.js<\/code>. Build scripts are defined in <code>package.json<\/code>. For development, use npm (e.g. <code>npm run dev<\/code>, <code>npm run build<\/code>).<\/p>\n\n<h3>Software Dependencies<\/h3>\n\n<p>This plugin requires the following software to be installed on the user's system:<\/p>\n\n<ul>\n<li>\u041a\u0440\u0438\u043f\u0442\u043e\u041f\u0440\u043e CSP - https:\/\/cryptopro.ru\/products\/csp<\/li>\n<li>\u041a\u0440\u0438\u043f\u0442\u043e\u041f\u0440\u043e \u042d\u0426\u041f Browser plug-in - https:\/\/docs.cryptopro.ru\/cades\/plugin<\/li>\n<\/ul>\n\n<p>For more information about \u041a\u0440\u0438\u043f\u0442\u043e\u041f\u0440\u043e CSP, please see the product leaflet: https:\/\/cryptopro.ru\/sites\/default\/files\/products\/csp\/cryptopro_csp_leaflet_a4.pdf<\/p>\n\n<p>All rights for \u041a\u0440\u0438\u043f\u0442\u043e\u041f\u0440\u043e CSP and \u041a\u0440\u0438\u043f\u0442\u043e\u041f\u0440\u043e \u042d\u0426\u041f Browser plug-in are reserved by \u00a9 \u041e\u041e\u041e \u00ab\u041a\u0420\u0418\u041f\u0422\u041e-\u041f\u0420\u041e\u00bb.<\/p>\n\n<h3>Recommended Browser<\/h3>\n\n<p>Browsers that do not require additional browser extension configuration after plugin installation:<\/p>\n\n<ul>\n<li>Chromium-Gost - https:\/\/cryptopro.ru\/products\/chromium-gost<\/li>\n<li>Yandex Browser for organizations - https:\/\/browser.yandex.ru\/b\/cryptopro_plugin<\/li>\n<\/ul>\n\n<h3>Alternative Browsers<\/h3>\n\n<p>If you plan to use a different browser, you will need to manually enable the browser extension after completing the plugin installation. Use the instruction corresponding to your browser:<\/p>\n\n<ul>\n<li>Chromium-based browser (Chrome, Microsoft Edge) - https:\/\/docs.cryptopro.ru\/cades\/plugin\/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-%d0%bd%d0%b0-%d0%be%d1%81%d0%bd%d0%be%d0%b2%d0%b5-chromium<\/li>\n<li>Opera browser or Yandex Browser - https:\/\/docs.cryptopro.ru\/cades\/plugin\/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-opera-%d0%b8%d0%bb%d0%b8-%d0%af%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%91%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80<\/li>\n<li>Firefox browser - https:\/\/docs.cryptopro.ru\/cades\/plugin\/plugin-installation-unix?id=%d0%98%d0%bd%d1%81%d1%82%d1%80%d1%83%d0%ba%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d0%b1%d1%80%d0%b0%d1%83%d0%b7%d0%b5%d1%80%d0%be%d0%b2-firefox<\/li>\n<li>Installing browser extension from file for different browsers - https:\/\/support.cryptopro.ru\/index.php?\/Knowledgebase\/Article\/View\/467<\/li>\n<\/ul>\n\n<h3>Hooks<\/h3>\n\n<p>This plugin provides several hooks to extend its functionality.<\/p>\n\n<h3>PHP Hooks<\/h3>\n\n<pre><code>sdcp_params\n<\/code><\/pre>\n\n<p>Filters the shortcode parameters. You can change the DOM element id to sign<\/p>\n\n<pre><code>add_filter('sdcp_params', 'change_sdcp_params');\nfunction change_sdcp_params($sdcp_params)\n{\n    \/\/ Your code here\n    return $sdcp_params;\n}\n\nsdcp_cert_list_item\n<\/code><\/pre>\n\n<p>Filters the list item of the certificate. You can filter cerst by INN, owner, cn<\/p>\n\n<pre><code>add_filter('sdcp_cert_list_item', 'change_sdcp_cert_item_li');\nfunction change_sdcp_cert_item_li($item)\n{\n    \/\/ Your code here\n    return 'Signed at: ' . esc_html($item['created_at']) . ' by ' . esc_html($item['owner']);\n}\n\n\nsdcp_saved_sign\n<\/code><\/pre>\n\n<p>This action is triggered after a signature is saved. You can do anything with signed data array<\/p>\n\n<pre><code>add_action('sdcp_saved_sign', 'sdcp_get_datasignement', 50, 1);\nfunction sdcp_get_datasignement($saved_data)\n{\n    \/\/ Your code here\n}\n<\/code><\/pre>\n\n<h3>JavaScript Hooks<\/h3>\n\n<p>You must add yur own script to Wordpress at first<\/p>\n\n<pre><code>function sdcp_hook_javascript_footer() {\n    ?&gt;\n        &lt;script&gt;\n          \/\/ your javascript code goes here\n        &lt;\/script&gt;\n    &lt;?php\n}\nadd_action('wp_footer', 'sdcp_hook_javascript_footer');\n\n\ncerts\n<\/code><\/pre>\n\n<p>This hook is triggered after the certificates are fetched.\n    sdcp_ajax_object.callbacks.push({ hook: \"certs\", callback: certs });\n    const certs = (certs) =&gt; {\n        console.log(certs);\n        return certs;\n    };<\/p>\n\n<pre><code>success\n<\/code><\/pre>\n\n<p>This hook is triggered after the form is submitted successfully.<\/p>\n\n<pre><code>sdcp_ajax_object.callbacks.push({ hook: \"success\", callback: success });\nconst success = (successData) =&gt; {\n    console.log(successData);\n    return successData;\n};\n\nerror\n<\/code><\/pre>\n\n<p>This hook is triggered if an error occurs during form submission.<\/p>\n\n<pre><code>sdcp_ajax_object.callbacks.push({ hook: \"error\", callback: errors });\nconst errors = (errorData) =&gt; {\n    console.log(errorData);\n    return errorData;\n};\n\nlistoptions\n<\/code><\/pre>\n\n<p>This hook is triggered when the certificate options are being rendered.<\/p>\n\n<pre><code>sdcp_ajax_object.callbacks.push({ hook: \"listoptions\", callback: listoptions });\nconst listoptions = (cert) =&gt; {\n    console.log(cert);\n    return Owner: ${cert.owner}, Expires: ${new Date(\n        cert.validTo\n      ).toLocaleDateString()}`;\n<\/code><\/pre>\n\n<p>};`<\/p>\n\n<h3>Verification<\/h3>\n\n<p>To verify the attached signature, you can use the CryptoPro aplication in your browser, or the Gosuslugi service.\nPlugin makes the attached signature and store it in post meta field \"sdcp_sign\" in \"sign\" json field.\nPlugin give you link to download the signatures as file in [sdcp_show_creation_date] shortcode. Optionaly you can use the \"post_id\" parameter with this short code. As example,<\/p>\n\n<pre><code>[sdcp_show_creation_date post_id=2]\n<\/code><\/pre>\n\n<h3>Using Gosuslugi<\/h3>\n\n<ol>\n<li>Go to the Gosuslugi signature verification page: https:\/\/e-trust.gosuslugi.ru\/check\/sign#\/portal\/sig-check<\/li>\n<li>Upload the file with the attached signature.<\/li>\n<li>The service will verify the signature and display the result.<\/li>\n<\/ol>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/crypto-wp<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<li><p>Use the <code>[sdcp_show_form]<\/code> shortcode to display the signing form on a post. You have to use the \"node_id\" parameter with this short code to set the DOM element for signing. Dont forget add this id (\"Anchor\" parameter in \nGutenberg editor). As example,<\/p>\n\n<p>[sdcp_show_form node_id=\"signed-content\"]<\/p><\/li>\n<li><p>Use the <code>[sdcp_show_creation_date]<\/code> shortcode to display the creation date of the signatures. Optionaly you can use the \"post_id\" parameter with this short code. As example,<\/p>\n\n<p>[sdcp_show_creation_date post_id=2]<\/p><\/li>\n<\/ol>\n\n<h4>Delete<\/h4>\n\n<p>Delete all the \"sdcp_sign\" post meta form database after plugin delete.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"what%20is%20a%20typical%20use%20case%3F%20%28e.g.%20signing%20a%20contract%29\"><h3>What is a typical use case? (e.g. signing a contract)<\/h3><\/dt>\n<dd><ul>\n<li><strong>Administrator<\/strong> publishes content for users (sends a link by email or places the content in a personal cabinet) so that they can sign it.<\/li>\n<li><strong>Users<\/strong> sign the content and see only their own signatures under it.<\/li>\n<li><strong>Administrator<\/strong> sees all users' signatures.<\/li>\n<\/ul><\/dd>\n<dt id=\"how%20can%20i%20customize%20the%20appearance%20of%20the%20signing%20form%3F\"><h3>How can I customize the appearance of the signing form?<\/h3><\/dt>\n<dd><p>You can use CSS to customize the signing form. The form has the ID <code>#sdcp_form<\/code>. The \"Add Sign\" button has the ID <code>#sdcp_add-sign-button<\/code>, and the \"Sign\" button has the ID <code>#sdcp_sign-button<\/code>. You can use these IDs to target the elements in your CSS.<\/p>\n\n<p>For example, to change the background color of the \"Sign\" button, you can use the following CSS:<\/p>\n\n<pre><code>#sdcp_sign-button { background-color: #0073aa; }\n<\/code><\/pre><\/dd>\n<dt id=\"how%20can%20i%20customize%20the%20appearance%20of%20the%20signature%20list%3F\"><h3>How can I customize the appearance of the signature list?<\/h3><\/dt>\n<dd><p>You can use CSS to customize the signature list. The list is an unordered list (<code>&lt;ul&gt;<\/code>) and each signature is a list item (<code>&lt;li&gt;<\/code>). The link to each signature has the class <code>.sdcp_signmment-link<\/code>.<\/p>\n\n<p>For example, to change the color of the signature links, you can use the following CSS:<\/p>\n\n<pre><code>\/* 1. Container Reset &amp; Layout *\/\n.sdcp_signment-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px; \/* Space between items *\/\n  max-width: 600px; \/* Optional: limits width for better readability *\/\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n}\n\n\/* 2. The Card Item *\/\n.sdcp_signment-item {\n  margin: 0;\n}\n\n\/* 3. The Link Styling (The main card look) *\/\n.sdcp_signmment-link {\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  \/* Size &amp; Spacing *\/\n  padding: 16px 20px;\n  background-color: #ffffff;\n  border-radius: 8px;\n\n  \/* Borders *\/\n  border: 1px solid #e0e0e0;\n  border-left: 6px solid #037971; \/* Teal Accent *\/\n\n  \/* Text Styling *\/\n  color: #56445d; \/* Dark Purple Text *\/\n  text-decoration: none;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 1.5;\n\n  \/* Modern Depth *\/\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n\n  \/* Animation *\/\n  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n\/* 4. Adding a decorative \"Status Dot\" using CSS (No HTML change needed) *\/\n.sdcp_signmment-link::before {\n  content: '';\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  background-color: #fb3640; \/* Red Dot *\/\n  border-radius: 50%;\n  margin-right: 15px;\n  flex-shrink: 0;\n}\n\n\/* 5. Hover State *\/\n.sdcp_signmment-link:hover {\n  transform: translateY(-3px); \/* Lifts up slightly *\/\n  box-shadow: 0 10px 20px rgba(159, 187, 204, 0.4); \/* Uses the Light Blue in shadow *\/\n  border-color: #9fbbcc; \/* Light Blue border *\/\n}\n\n\/* 6. Active\/Click State *\/\n.sdcp_signmment-link:active {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  background-color: #fafafa;\n}\n\n\/* 7. Focus State (Accessibility) *\/\n.sdcp_signmment-link:focus {\n  outline: none;\n  box-shadow: 0 0 0 3px #ffcf56; \/* Yellow Glow ring *\/\n  border-radius: 8px;\n}\n<\/code><\/pre><\/dd>\n<dt id=\"how%20can%20i%20customize%20the%20appearance%20of%20the%20dynamically%20created%20elements%3F\"><h3>How can I customize the appearance of the dynamically created elements?<\/h3><\/dt>\n<dd><p>The plugin's JavaScript file creates some HTML elements dynamically. You can use CSS to customize these elements as well.<\/p>\n\n<ul>\n<li>The certificate select dropdown has the ID <code>#sdcp_certificate-select<\/code> and the class <code>.sdcp_cert-select<\/code>.<\/li>\n<li>The options in the select dropdown have the class <code>.sdcp_cert-select<\/code>.<\/li>\n<li>The footer added to the PDF has the class <code>.temp-pdf-footer<\/code>.<\/li>\n<\/ul>\n\n<p>For example, to change the font size of the certificate select dropdown, you can use the following CSS:<\/p>\n\n<pre><code>#sdcp_certificate-select { font-size: 14px; }\n<\/code><\/pre><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Plugin to create cms signature for DOM element with crypto pro plugin (Russian GOST).","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/242529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=242529"}],"author":[{"embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/enkydo"}],"wp:attachment":[{"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=242529"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=242529"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=242529"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=242529"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=242529"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/fr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=242529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}